Vue计算属性实现模糊查询

最新推荐文章于 2022-08-08 13:41:15 发布

神圣的小昌哥

最新推荐文章于 2022-08-08 13:41:15 发布

阅读量1.3k

点赞数

分类专栏： vue 计算属性 js模糊查询文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_40749372/article/details/119727343

版权

vue 同时被 3 个专栏收录

13 篇文章

订阅专栏

计算属性

1 篇文章

订阅专栏

js模糊查询

1 篇文章

订阅专栏

本文探讨了如何通过使用Vue的计算属性而非直接修改数据数组，实现在输入框内容变化时进行模糊查询并保持原始数据的独立性。通过计算属性实现缓存，避免了多次不必要的数组过滤操作，提高了代码的可维护性和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是在本地实现一个模糊查询的例子，期初我定义了一个方法，来监测input值发生该改变时触发过滤符合条件的值。

html：

    <div id="app">
        <input type="text" @input="handleInput()" v-model="mytext">
        <ul v-for="(item,index) in arr">
            <li>{{item}}</li>
        </ul>
    </div>

<script>
    var vu = new Vue({
        el:"#app",
        data:{
            mytext:"",
            arr:[
                "南京市第一中学",
                "南京市第二中学",
                "南京市第三中学",
                "南京市外国语学校",
                "南京市栖霞高级中学"
            ],
            list:[
                "南京市第一中学",
                "南京市第二中学",
                "南京市第三中学",
                "南京市外国语学校",
                "南京市栖霞高级中学"
            ]
        },
        methods:{
            handleInput(){
                //利用输入值，过滤符合条件的元素
                //filter过滤数组
                var newList = this.list.filter(item=>item.indexOf(this.mytext) > -1)
                this.arr = newList;
            }
        }
    })
</script>

这样的方法会监测input值改变，调用handleInput过滤，但是会改变arr原始数组的值。不利于二次过滤，必须要使用变量来存储原始数组。而造成代码冗余。

计算属性可以基于响应式依赖进行缓存。在监测到input值发生改变时，相关响应式依赖发生改变重新求值。这就意味着只要 arr还没有发生改变，多次访问 handleinput 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性html：

    <div id="app">
        <input type="text" v-model="mytext">
        <ul v-for="(item,index) in handleInput">
            <li>{{item}}</li>
        </ul>
    </div>

js：

<script>
    var vu = new Vue({
        el:"#app",
        data:{
            mytext:"",
            arr:[
                "南京市第一中学",
                "南京市第二中学",
                "南京市第三中学",
                "南京市外国语学校",
                "南京市栖霞高级中学"
            ],
        },
        computed:{
            handleInput(){
                //利用输入值，过滤符合条件的元素
                //filter过滤数组
                var newList = this.list.filter(item=>item.indexOf(this.mytext) > -1)
                this.arr = newList;
            }
        }
    })
</script>