Vue笔记 - 列表过滤

1.computed实现

<body>
    <div id="root">

        <input type="text" v-model="keyWord"></input>
        <ul>
            <li v-for="(value, index) in filpersons" :key="value.id">
                {{value.name}} -- {{value.age}}
            </li>
        </ul>
        
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data: {
                 keyWord:'',
                 persons:[
                     {id:'001', name:'马冬梅', age:'18'},
                     {id:'002', name:'李冬天', age:'32'},
                     {id:'003', name:'王五', age:'55'},
                     {id:'004', name:'五无', age:'55'}
                 ],
                 
            },

            computed:{
                filpersons(){
                    return this.filpersons = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })

                }
            }
        })
    </script>
</body>

2.watch实现

<body>
    <div id="root">

        <input type="text" v-model="keyWord"></input>
        <ul>
            <li v-for="(value, index) in filpersons" :key="value.id">
                {{value.name}} -- {{value.age}}
            </li>
        </ul>
        
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data: {
                 keyWord:'',
                 persons:[
                     {id:'001', name:'马冬梅', age:'18'},
                     {id:'002', name:'李冬天', age:'32'},
                     {id:'003', name:'王五', age:'55'},
                     {id:'004', name:'五无', age:'55'}
                 ],
                 filpersons:[]
            },

            watch:{
                keyWord:{
                    immediate:true,
                    handler(val){
                        this.filpersons = this.persons.filter((p)=>{
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })
    </script>
</body>
posted @ 2022-04-28 16:12  wilsend  阅读(31)  评论(0)    收藏  举报