Vue实现模糊查询实现方法

最新推荐文章于 2024-11-11 23:32:58 发布

Hoki802

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量195

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cloki/article/details/126449240

版权

Vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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方法中默认会有事件对象；如果加了()可以传递事件对象使用 $e v e n t ，但是$ event必须是传递的第一个参数。

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

方法三：

通过模板语法中调用方法实现

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

方法四：

通过计算属性实现，计算属性会用缓存，多次使用只计算一次，比方法三效果更好

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

方法五：

通过监视属性实现

<div id="app">
    <input type="text" v-model="text">
    <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']
            }
        },
        watch: {
            text() {
                this.dataList = this.originList.filter(item => item.includes(this.text))
            }
        }
    })
</script>