vue学习之列表过滤

列表过滤：filter方法

<template>
 <div class="root">
     <input type="text" v-model="valuea">
     <div v-for="items in valuenew" :key="items.name">
         {{items.id}} -- {{items.name}} --{{items.age}}
     </div>
     </div> 
</template>

<script>
// import { handleError } from '@vue/runtime-core'
export default {
data(){
    return{
     value:[//原数据
         {id:1,name:"张三",age:"18"},
          {id:2,name:"张四",age:"18"},
           {id:3,name:"张五",age:"18"}
     ],
       valuea:"",//input：v-model实例化

       valuenew:[]//过滤后的数据
    }
},
watch:{
    valuea:{
        immediate:true,//马上执行
      handler(val){//当数据变化的时候，执行函数（val）新的值
          this.valuenew = this.value.filter((items)=>{//filter:过滤，要将过滤的数据放到新的数据里面，不然会修改原数据
              return items.name.indexOf(val) !== -1//indexOf(val) !== -1，返回一个索引不等于-1的数
          })
      }
    }
}
}
</script>

<style>

</style>