VUE搜索姓名

最新推荐文章于 2022-06-08 15:26:28 发布

写Bug的老王

最新推荐文章于 2022-06-08 15:26:28 发布

阅读量449

点赞数

分类专栏： vue姓名搜索文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/wsq88888888/article/details/121087572

版权

vue姓名搜索专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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