列表过滤--监听属性过滤
<!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="root"> <h2>人员列表信息(遍历数组):</h2> <hr> <!-- <button @click.once="add">新增人员</button> --> <!-- <button @click.once="searchPersons">搜索</button> --> <input type="text" placeholder="请输入姓名" v-model="keyWord"> <!-- 遍历数组 --> <ul> <li v-for="p in filPersonList" :key="p.id"> {{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> <hr> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { keyWord: '', personList: [ { id: '001', name: '乔峰', age: 28, sex: '男' }, { id: '002', name: '虚竹', age: 25, sex: '男' }, { id: '003', name: '段誉', age: 22, sex: '男' }, { id: '004', name: '童姥', age: 90, sex: '女' }, { id: '005', name: '李秋水', age: 88, sex: '女' }, ], filPersonList: [ ], }, watch: { keyWord: { immediate: true, handler (val) { this.filPersonList = this.personList.filter((p) => { return p.name.indexOf(val) !== -1 }) } } } }) </script>
列表过滤--计算属性过滤(运行效果如上)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表过滤之computed</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表信息(遍历数组):</h2> <hr> <!-- <button @click.once="add">新增人员</button> --> <!-- <button @click.once="searchPersons">搜索</button> --> <input type="text" placeholder="请输入姓名" v-model="keyWord"> <!-- 遍历数组 --> <ul> <li v-for="p in filPersonList" :key="p.id"> {{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> <hr> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { keyWord: '', personList: [ { id: '001', name: '乔峰', age: 28, sex: '男' }, { id: '002', name: '虚竹', age: 25, sex: '男' }, { id: '003', name: '段誉', age: 22, sex: '男' }, { id: '004', name: '童姥', age: 90, sex: '女' }, { id: '005', name: '李秋水', age: 88, sex: '女' }, ], }, computed: { // 简写,简写时确保不用settter // myfullname: function () { filPersonList () { return this.personList.filter((p) => { return p.name.indexOf(this.keyWord) !== -1 }) } }, }) </script>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!