vue10-5 列表过滤--使用computed更简洁

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤-computed版</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员搜索：</h2>
        <input type="text" placeholder="请输入关键字" v-model="keyWord"><br/><br/>

        <div v-for="item in filPersons">
            {{item.id}}--{{item.name}}--{{item.age}}
        </div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    persons:[
                        {id: '001', name: '马冬梅', age: 19, sex: '女'},
                        {id: '002', name: '周冬雨', age: 20, sex: '女'},
                        {id: '003', name: '周杰伦', age: 21, sex: '男'},
                        {id: '004', name: '温兆伦', age: 22, sex: '男'},
                    ],
                }
            },
            computed:{
                filPersons(){
                    // 返回数组过滤后的数组
                  return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2022-07-15 11:10  黑无常  阅读(124)  评论(0)    收藏  举报