<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="main"> <h2>企业家列表</h2> <input type="text" placeholder="请输入名字" v-model="keyword"> <ul> <li v-for="(p,index) in filterPerson" :key="index"> {{p.name}}---{{p.age}}--{{p.sex}} </li> </ul> </div> <script type="text/javascript"> //创建一个Vue实例 new Vue({ el:'#main', //el用于指定容器,值通常为css选择器字符串 data:{//data用于储存数据,数据供el所指定的容器使用 persons:[ {name:'雷军',age:45,sex:'男'}, {name:'李连杰',age:45,sex:'男'}, {name:'李彦宏',age:43,sex:'男'}, {name:'马化腾',age:43,sex:'男'}, {name:'马云',age:50,sex:'男'}, {name:'王伟',age:50,sex:'女'} ], keyword:"", }, computed: { filterPerson() { return this.persons.filter((p)=>{return p.name.indexOf(this.keyword)!=-1}); } } }) </script> </body> </html>
标签:el,Vue,name,age,sex,过滤,列表 From: https://www.cnblogs.com/smallstone/p/18169757