切换模式
vue 实现前端模糊匹配搜索
可以借助 js 自带的 filter 方法和正则表达式来筛选我们需要的元素
首先构建html框架：
html
<div id="app">
<div class="wrapper">
<input type="text" v-model="searchText"><button @click="submit">搜索</button>
</div>
<table>
<thead>
<th>名称</th>
<th>价格</th>
<th>备注</th>
</thead>
<tbody>
<tr v-for="(item,index) in data" :key="index">
<td>{{item.label}}</td>
<td>￥{{item.price}}</td>
<td>{{item.desc}}</td>
</tr>
</tbody>
</table>
</div><div id="app">
<div class="wrapper">
<input type="text" v-model="searchText"><button @click="submit">搜索</button>
</div>
<table>
<thead>
<th>名称</th>
<th>价格</th>
<th>备注</th>
</thead>
<tbody>
<tr v-for="(item,index) in data" :key="index">
<td>{{item.label}}</td>
<td>￥{{item.price}}</td>
<td>{{item.desc}}</td>
</tr>
</tbody>
</table>
</div>生成筛选方法
用户输入的内容动态绑定在变量searchText上，用户点击搜索触发submit方法，我们将searchText变量作为正则表达式的检测标准：
js
submit() {
let text = this.searchText
let reg = new RegExp(text) //声明正则变量
this.data = this.tableData.filter(item => reg.test(item.label)) //返回
}submit() {
let text = this.searchText
let reg = new RegExp(text) //声明正则变量
this.data = this.tableData.filter(item => reg.test(item.label)) //返回
}这里使用了data变量用于存储搜索后的结果（以及绑定到表格上渲染），tableData存储表格的原始数据，目的是当用户输入空格时可以还原所有数据，this.tableData.filter(item => reg.test(item.label))是简写用法，完整为：
js
let func = function (item) {
if (reg.test(item.label)) { //检测通过
return item
}
}
this.data = this.tableData.filter(func)let func = function (item) {
if (reg.test(item.label)) { //检测通过
return item
}
}
this.data = this.tableData.filter(func)filter函数迭代一个数组，然后根据传入的函数筛选合适的元素并且返回一个全新的数组
