前端小白新人一枚~ 有不对请指正哦~
写这篇文章的原因:
1. 我使用了 computed 和 watch分别实现对列表的过滤筛选,发现这两个方法均是用户输入自动过滤,于是我想使用 点击事件过滤,以下会附上使用watch和点击事件实现代码;
2. 对于watch和computed的理解不足,反思后我对两种方法的理解:
(1)computed : (更适合属性 如:商品结算)
A. 触发函数执行 监听数据(其计算的是对象,属性; 计算属性不可在data中定义,例:不可侦听定义在data里的数组)
B. computed中的函数必须要用 return返回 ,首次加载就开始监听,通俗讲就是页面首次刷新即可显示出全部将要进行筛选的数据
(2)watch: (更适合数据 如:搜索框)
A.watch是监听一个值的变化,然后执行对应的回调。不用 return返回 ,首次加载需要开启监听。immediate:true
watch实现输入自动过滤:
<div class="search-input">
<el-input v-model="keyword" placeholder="请输入内容">
</el-input>
</div>
<div class="search-button">
<el-button type="primary" @click="searchButton()"
> 搜索 </el-button>
</div>
<ul>
<li v-for="(card, index) in filtertabList" :key="index">
{{ card.name }}
</li>
</ul>
data(){
keyword: "",
filtertabList: [],
tabList: [
{ name: "职业0" },
{ name: "职业1" },
{ name: "兴趣2" },
{ name: "兴趣3" },
],
}
watch: {
keyword: {
immediate: true,
handler(value) {
this.filtertabList = this.tabList.filter((t) => {
return t.name.indexOf(value) !== -1;
});
},
},
},
点击事件过滤:
created() {
this.filtertabList = this.tabList;
},
methods:{
searchButton() {
if (this.keyword) {
this.filtertabList = this.tabList.filter((card) => {
return card.name.indexOf(this.keyword) !== -1;
});
} else {
this.filtertabList = this.tabList;
}
},
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)