Vue-17、Vue人员列表过滤（案例）

news2024/9/27 5:30:18

1、watch实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染过滤</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <input type="text" :placeholder="message" v-model="keyword">
    <ul>
        <li v-for="p in persons2" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            message:'请输入名字搜索',
            keyword:'',
            persons:[
                {id:'1',name:'马冬梅',age:18,sex:'女'},
                {id:'2',name:'周冬雨',age:20,sex:'女'},
                {id:'3',name:'周杰伦',age:21,sex:'男'},
                {id:'4',name:'文兆伦',age:22,sex:'男'},
            ],
            persons2:[
            ],
        },
       watch:{
            keyword: {
                immediate:true,
                handler(newvalue){
                    console.log(newvalue);
                    const  arr = this.persons.filter((p)=>{
                        return p.name.includes(newvalue);
                    });
                    this.persons2 = arr;
                }
            }
       }
    })
</script>
</body>
</html>

2、computed实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染过滤computed实现</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <input type="text" :placeholder="message" v-model="keyword">
    <ul>
        <li v-for="p in persons2" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            message:'请输入名字搜索',
            keyword:'',
            persons:[
                {id:'1',name:'马冬梅',age:18,sex:'女'},
                {id:'2',name:'周冬雨',age:20,sex:'女'},
                {id:'3',name:'周杰伦',age:21,sex:'男'},
                {id:'4',name:'文兆伦',age:22,sex:'男'},
            ],

        },
        computed:{
            persons2(){
              const arr = this.persons.filter((p)=>{
                   return  p.name.includes(this.keyword);
                });
                return arr;
            }
        }
    })
</script>
</body>
</html>