Vue实现模糊查询实现方法

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))