vueフィルタ機能の実現

template:

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

原理:dataの中のlist配列を循環して、文字列search()を通じてvueのcomputed returnを通じて新しい配列をフィルタします