Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染综合 - 过滤应用
目录
过滤应用
引入vue
Vue设置
设置页面元素
模糊查询过滤实现
函数表达式实现
总结
过滤应用
综合响应式渲染做一个输入框，用来实现；搜索输入框关键词符合列表。
引入vue
在当前html文件中引入Vue2 js。
示例如下：
<script src="../lib/vue.js"></script>Vue设置
实例化Vue，绑定具体元素；设置相应的数据状态变量和事件处理。
示例如下：
<script>let vm = new Vue({el:'#box',data: {mytext:'',datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de']},methods:{handleInput() {console.log('input')}}})
</script>设置页面元素
设置页面元素并绑定事件。
示例如下：
<div id="box"><input type="text" @input="handleInput"><ul><li v-for="item in datalist" :key="item">{{item}}</li></ul>
</div>模糊查询过滤实现
Input事件，只要值改变就会触发；然后在绑定事件中对列表变量进行过滤处理。
注意：需要设置一个不变的数组源，如果把过滤的数组覆盖掉原数组，则无法再实现反复输入和过滤，最后变成空列表。
示例如下：
let vm = new Vue({el:'#box',data: {mytext:'',datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de'],originList:['aa', 'bb', 'cc', 'dd', 'ee', 'de']},methods:{handleInput(eve) {console.log('input', eve.target.value)this.mytext = eve.target.value;this.datalist = this.originList.filter(item=> item.includes(this.mytext))}}
})效果：
函数表达式实现
上面实现的方式，不够完美；下面我们使用函数表达式来进行优化实现。
首先修改input绑定事件，改为值改变触发事件。
然后渲染列表改为函数表达式实现。
示例如下：
<div id="box"><input type="text" v-model="mytext"><ul><li v-for="item in test()" :key="item">{{item}}</li></ul>
</div>
<script>let vm = new Vue({el:'#box',data: {mytext:'',datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de']},methods:{test() {return this.datalist.filter(item=> item.includes(this.mytext))}}})
</script>效果：
总结
综合响应式渲染做一个输入框，用来实现；搜索输入框关键词符合列表。