当前位置：首页 > article >正文

Vue 响应式渲染 - 过滤应用

article 2025/2/11 12:26:04

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>

效果：