Vue.js——如何显示错误的数组元素？
如果我的代码如下面的代码在我的vue.js中，点击一个按钮后，我怎样才能显示我点击的数组项目（例如，Donnie）并隐藏其余的所有内容？那么当你再次点击唯一显示的元素时，再次显示所有其他数组元素？
const app = new Vue({
el: '#app',
data: {
keyword: '',
friends: [
{
name: "Donnie",
age: "20"
},
{
name: "Joanne",
age:"19",
},
{
name: "David",
age: "26"
},
{
name: "Peter",
age: "23"
},
{
name: "John",
age: "29"
},
{
name: "Jason",
age: "19"
},
],
},
computed: {
filteredList() {
return this.friends.filter((friend) => {
return friend.name.toLowerCase().includes(this.keyword) + friend.age.includes(this.keyword) + friend.name.includes(this.keyword);
});
}
},
methods:{
exclude(friend) {
console.log(!friend.name);
},
}
})
HTML：
<div v-for="friend in filteredList" class="card" @click="exclude(friend)">
{{friend.name}} - {{friend.age}}
</div>
相关文章
相似问题
相关问答用户
请输入您想邀请的人