vue 联动搜索

Posted 2020-10-04

<input v-model="query">//将输入值绑定

//迭代computedList

<li v-for="(item, index) in computedList"v-bind:key="item.msg"v-bind:data-index="index">{{ item.msg }}</li>

//数据

list: [

{ msg: ‘Bruce Lee‘ },

{ msg: ‘Jackie Chan‘ },

{ msg: ‘Chuck Norris‘ },

{ msg: ‘Jet Li‘ },

{ msg: ‘Kung Fury‘ }

]

//下面是联动搜索的方法

返回筛选后的computedList列表

computedList: function () {
var vm = this

//利用筛选将符合输入的list返回，再通过迭代渲染出来
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}