vue实现筛选功能

template:

<template>
    <div class="">
        <input type="text" v-model="str">
        <ul>
            <li v-for="(item,$index) in list2" :key="$index">{{item.name}}</li>
        </ul>
    </div>
</template>

script:

<script>
    export default {
        data: () => ({
            // 用户输入的筛选条件
            str: '',
            list: [ //假数据
                {
                    name: "张三",
                    age: 52,
                },
                {
                    name: "李四",
                    age: 25,
                },
                {
                    name: "王五",
                    age: 28,
                },
                {
                    name: "赵六",
                    age: 32,
                },
                {
                    name: "王大狗",
                    age: 38,
                },
                {
                    name: "王2狗",
                    age: 42,
                },
                {
                    name: "王3狗",
                    age: 55,
                },
                {
                    name: "王4狗",
                    age: 46,
                },
                {
                    name: "王5狗",
                    age: 12,
                },
                {
                    name: "王6狗",
                    age: 30,
                },
                {
                    name: "王7狗",
                    age: 32,
                }
            ]
        }),
        computed: {
            list2() {
               let  arr = [];
               for (let i = 0; i < this.list.length; i++) {
                   if (this.list[i].name.search(this.str) != -1) {
                       arr.push(this.list[i])
                   }
               }
               return arr
            }
        }
    }
</script>

原理:
循环data里面的list数组,通过字符串search()筛选
通过vue的computed return出来一个新数组