Vue实现模糊查询实现方法

Vue模糊查询实战：五种实现方法详解

最新推荐文章于 2025-11-21 15:30:50 发布

原创

最新推荐文章于 2025-11-21 15:30:50 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了如何在Vue应用中实现模糊查询，包括v-model配合过滤数组、事件对象与filter结合、模板内调用方法、计算属性缓存和监视属性更新五个方法。这些技巧有助于提高前端开发的灵活性和用户体验。

Vue模糊查询实现方法

方法一：

通过添加v-model和新数组的方法实现

<div id="app">
    <input type="text" v-model="text" @input="handleInput">
    <ul>
        <li v-for="item in dataList" :key="item">
            {
  
  { item }}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                text: '',
                dataList: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'acasd'],
                originList: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'acasd']
            }
        },
        methods: {
            handleInput() {
                this.dataList = this.originList.filter(item => item.includes(this.text))
            }
        }
    })
</script>

方法二：

通过事件对象搭配新增数组方法实现

注意：在绑定事件时，不带参数的情况下，不加()在methods方法中默认会有事件对象；如果加了()可以传递事件对象使用