vue姓名筛选模糊搜索

一个大点点.

已于 2022-10-13 16:44:12 修改

阅读量1.5k

点赞数 2

文章标签： vue.js 前端 javascript

于 2021-10-30 14:29:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53966155/article/details/121050638

版权

本文介绍了如何使用Vue.js和计算属性(computed)实现在输入'六'关键字时筛选出名字中包含'六'的所有人员列表。通过数据过滤，展示了动态展示姓名的示例代码和实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、名字筛选功能主要运用了计算属性关键词: computed

2、效果图

输入“六”关键字显示名字带“六”的所有名字

3、代码（vue.js记得修改目录）

用到的数据：

list: [
					{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'}
					],

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模糊搜索</title>
		<script src="./vue.js"></script>
		<style type="text/css">
			body{
				background-color: #cecece;
			}
			input{
				height: 25px;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>名字筛选</h1>
			<input type="text" v-model="keyword" placeholder="请输入名字">
			<div class="list">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>电话</td>
				</tr>
				<tr v-for="(item,index) in flist" :key="item.index">
					<td>{{item.name}}</td>
					<td>{{item.sex}}</td>
					<td>{{item.age}}</td>
					<td>{{item.phone}}</td>
				</tr>
			</table>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					keyword:"",
					list: [
					{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'}
					],
				},
				computed: {
					flist() {
						// 如果输入的名字在list存在,返回有这个字的名字
						// item.name这里是按名字搜索，也可按其他进行搜索
						return this.list.filter(item => item.name.includes(this.keyword));
					}
				},
			})
		</script>
	</body>
</html>

编写代码不易，记得点赞支持哦哦哦~~~