Vue学习笔记-05

Vue3学习笔记-05

一、列表的过滤

1.用watch实现的列表过滤

`immediate:true`  ,  表示立即执行handler函数

<div id="root">
        <!--遍历数组-->
        <h2>人员信息</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <ul>
            <li v-for="item in filePersons" :key="item.userId">{
  {item.userId}}-{
  {item.name}}-{
  {item.age}}</li>
        </ul>
    </div>
    <script>
        new Vue({
    
            el:'#root',
            data:{
    
                keyWord:'',
                persons:[
                    {
    
                        userId:1,
                        name:'马冬梅',
                        age:22
                    },
                    {
    
                        userId:2,
                        name:'周冬雨',
                        age:21
                    },
                    {
    
                        userId:3,
                        name:'周杰伦',
                        age:32
                    },
                    {
    
                        userId:4,
                        name:'温兆伦',
                        age:26
                    }
                ],
                filePersons:[]
            },
            watch:{
       
                    keyWord:{
    
                        immediate:true,
                        handler(val){
    
                            this.filePersons = this.persons.filter((p)=>{
    
                            //这里的indexOf函数，是判断某个字符串中是否包含另外一个字符，不包含返回-1，包含返回该字符在字符串中的下标，从0开始编号
                            //当判断的字符为 '' 的时候，显示的下标是0，也就是所有的字符串都包含 '' 字符，其返回值为0
                            return p.name.indexOf(val) !=-1     
                        })
                    }

                }
            }
        })
    </script>

2.计算属性实现列表过滤

 <div id="root">
        <!--遍历数组-->
        <h2>人员信息</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <ul>
            <li v-for="item in filePersons" :key="item.userId">{
  {item.userId}}-{
  {item.name}}-{
  {item.age}}</li>
        </ul>
    </div>
    <script>
        //用计算属性实现
        new Vue({
    
            el:'#root',
            data:{
    
                keyWord:'',
                persons:[
                    {
    
                        userId:1,
                        name:'马冬梅',
                        age:22
                    },
                    {
    
                        userId:2,
                        name:'周冬雨',
                        age:21
                    },
                    {
    
                        userId:3,
                        name:'周杰伦',
                        age:32
                    },
                    {
    
                        userId:4,
                        name:'温兆伦',
                        age:26