重点:

1.搜索框input用到双向绑定v-model

2.列表展示用到computed计算属性

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<title></title>
		<style>
* {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 20px;
	font-family: Arial, "宋体";
	font-size: 12px;
	line-height: 20px;
	color: #333333;
}
</style>
	</head>
	<body>
		<div id="app">
			<input type='text' v-model='content'>
			<ul>
				<li v-for="(item,i) in newList" :key="i">
					{{item.name}}---{{item.age}}
				</li>
			</ul>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
       var vm = new Vue({
            el: '#app',
            data: {
            	content:'',
            	list:[
            		{name:'张三',age:20},
            		{name:'李四',age:21},
            		{name:'王五',age:22},
            		{name:'小三子',age:23},
            		{name:'李老大',age:24},
            		{name:'大猪头',age:25},
            	]
            },
            computed:{
            	newList:function(){
            		let content=this.content;
            		//使用循环
            		/*let arr=[];
             		this.list.forEach(function(item){
            			if(item.name.indexOf(content)!=-1){
            				arr.push(item);
            			}
            		})
            		return arr;*/
            		
            		//使用filter函数
            		return this.list.filter(function(item){
            			return item.name.indexOf(content)!=-1;
            		});
            	}
            },
            methods:{
            }
        });
    </script>
</html>

 

Logo

前往低代码交流专区

更多推荐