VUE搜索姓名

 

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'}
              ],