Vue 响应式渲染 - 过滤应用

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>

效果：

 

总结

综合响应式渲染做一个输入框，用来实现；搜索输入框关键词符合列表。