<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
})
}