Vue经典实例之数据搜索、数据过滤（简单易懂）

朴灿烈づ我的快乐病毒、 2021-07-25 01:19 438阅读 0赞

### 重点： ###

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>