使用vue的computed 计算属性,filter 做筛选

使用vue的computed 计算属性,filter 做筛选_第1张图片
输入框输入值之后,立马筛选下边符合条件的数据
html

  <div id="app">
    <input type="text" v-model="val">
    <ul>
      <li v-for="(item,index) in dataSource">
        {{item.name}}
      </li>
    </ul>
  </div>

js

new Vue({
  el:'#app',
  data:{
    list:[
      {
        name:'a12313123',
      },
      {
        name:'d123245',
      },
      {
        name:'c1245s',
      },
      {
        name:'b521254',
      },
    ],
    val:''
  },
  computed:{
    dataSource(){
      return this.list.filter(k=>{
        return k.name.match(this.val)
      })
    }
  }
})

你可能感兴趣的:(vue2.0.js)