23.Vue.列表过滤_input模糊搜索

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<!-- 使用watch实现列表循环 -->
		<div id="root">
			<input type="text" placeholder="输入姓名" v-model="keyWord" />
			<ul>
				<li v-for="(p,index) in filPersons" :key="index">
					{{p.name}}--{{p.age}}--{{p.sex}}
				</li>
			</ul>
		</div>
		<!-- 使用computed实现列表循环 -->
		<div id="root2">
			<input type="text" placeholder="输入姓名" v-model="keyWord" />
			<ul>
				<li v-for="(p,index) in filPersons" :key="index">
					{{p.name}}--{{p.age}}--{{p.sex}}
				</li>
			</ul>
		</div>
	</body>
</html>

<script type="text/javascript">
	// 使用watch实现列表循环
	const vm = new Vue({
		data: {
			keyWord: '',
			persons: [{
					id: '001',
					name: '马冬梅',
					age: 19,
					sex: '女'
				},
				{
					id: '002',
					name: '周冬雨',
					age: 20,
					sex: '女'
				},
				{
					id: '003',
					name: '周杰伦',
					age: 21,
					sex: '男'
				},
				{
					id: '004',
					name: '温兆伦',
					age: 22,
					sex: '男'
				},
				{
					id: '005',
					name: '温元',
					age: 22,
					sex: '男'
				},
				{
					id: '006',
					name: '凯伦',
					age: 22,
					sex: '男'
				},
				{
					id: '007',
					name: '王凯',
					age: 22,
					sex: '男'
				},
				{
					id: '008',
					name: '王源',
					age: 22,
					sex: '男'
				},
			],
			filPersons: []
		},
		watch: {
			keyWord: {
				immediate: true,
				handler(value) {
					//将过滤完的数组赋值给filPersons以重新渲染
					//p是数组里的单个元素
					this.filPersons = this.persons.filter((p) => {
						//假如用户输入的value包含在p.name则返回该元素p
						return p.name.indexOf(value) !== -1; //indexOf假如不包含则返回-1
					});
				}
			}
		}
	});
	vm.$mount('#root'); //Vue实例绑定div容器

	// 使用computed实现列表循环
	const vm2 = new Vue({
		data: {
			persons: vm.persons,
			keyWord: '',
		},
		computed: {
			//此处定义了filPersons则data里不能再定义
			filPersons() {
				//将过滤完的数组返回给Vue
				//p是数组里的单个元素
				return this.persons.filter((p) => { //
					//假如用户输入的value包含在p.name则返回该元素p
					return p.name.indexOf(this.keyWord) !== -1; //indexOf假如不包含则返回-1
				});
			}
		}
	});
	vm2.$mount('#root2');
</script>

你可能感兴趣的:(VUE,vue.js,typescript,javascript)