Vue的列表过滤的两种方法

实现列表过滤可以通过watch（监视）实现也可以通过computed（计算属性）来实现；

首先奉上基本代码

 <div id="root">

        <!-- 遍历数组 -->

        <h2>人员列表</h2>

        <input type="text" placeholder="请输入名字" v-model="keyword"></input>

        <ul>

            <li v-for="(item , index) in filterperson" :key="item.id">

               {{item.name}} - {{item.age}} - {{item.sex}}

            </li>          

        </ul>  

    </div>

以上为在页面的设计

 

以上为页面效果。

以下为Vue

------------------------------------------------------------

第一种：computed实现

 computed:{

        filterperson(){

            return this.persons.filter((item)=>{

                return item.name.indexOf(this.keyword) !== -1

            })

        }

       },

第二种 watch实现

并且要在data中定义数组 filterperson

 

 watch:{

         keyword:{

             immediate:true,

             handler(val){

             this.filterpersons =  this.persons.filter((item)=>{

              return item.name.indexOf(val) !== -1

               })

             }

             }

       }

以上就是这两种方法。