html代码块
<div id="app">
<input type="text" v-model="keyword" placeholder="请搜索姓名"/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr v-for="item in flist">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
</tr>
</table>
</div>
js代码块
<script type="text/javascript">
new Vue({
el: "#app",
computed:{
flist(){
//全局搜索
return this.students.filter(item=>JSON.stringify(item).includes(this.keyword));
}
},
data: {
keyword: "",
students: []
},
})
</script>
students数据
students: [
{name: '张三', sex: '女', age: 19, phone: '18921212121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李思思', sex: '男', age: 29, phone: '18921221121'},
{name: '张三', sex: '女', age: 19, phone: '18921212121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '李四', sex: '男', age: 29, phone: '18921221121'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '王五', sex: '女', age: 39, phone: '18921788721'},
{name: '赵六', sex: '男', age: 49, phone: '18921556121'},
{name: '李五五', sex: '男', age: 29, phone: '18921221121'}
],