vue实现筛选功能
template:<template><div class=""><input type="text" v-model="str"><ul><li v-for="(item,$index) in list
·
template:
<template>
<div class="">
<input type="text" v-model="str">
<ul>
<li v-for="(item,$index) in list2" :key="$index">{{item.name}}</li>
</ul>
</div>
</template>
script:
<script>
export default {
data: () => ({
// 用户输入的筛选条件
str: '',
list: [ //假数据
{
name: "张三",
age: 52,
},
{
name: "李四",
age: 25,
},
{
name: "王五",
age: 28,
},
{
name: "赵六",
age: 32,
},
{
name: "王大狗",
age: 38,
},
{
name: "王2狗",
age: 42,
},
{
name: "王3狗",
age: 55,
},
{
name: "王4狗",
age: 46,
},
{
name: "王5狗",
age: 12,
},
{
name: "王6狗",
age: 30,
},
{
name: "王7狗",
age: 32,
}
]
}),
computed: {
list2() {
let arr = [];
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].name.search(this.str) != -1) {
arr.push(this.list[i])
}
}
return arr
}
}
}
</script>
原理:
循环data里面的list数组,通过字符串search()筛选
通过vue的computed return出来一个新数组
更多推荐
已为社区贡献16条内容
所有评论(0)