Vue js显示隐藏元素点击

Question

我是vue js的新手。我想在点击时显示隐藏元素。所以我能做的是在数据对象中创建一个属性，如

isHidden: false

并添加一个类似

的方法

showHide(){
return this.isHidden = !this.isHidden;
}

并在点击事件上绑定showHide方法，例如

<li @click="showHide">Some text</a>

但问题是-如果有几个列表项绑定相同的单击事件，所有列表将显示在点击，或所有将隐藏。但是我想要目标元素只能通过点击显示或隐藏。

请问我该怎么做呢?

Answer 1

您可以使用一些数据来确定要显示/隐藏的元素。例如:id，每个元素的索引

<button v-for="(i, ind) in listElement" @click="toggleElement(ind)" :key="ind">
Toggle {{ i }}
</button>
<p v-for="(i, ind) in listElementShow" :key="ind">
Element: {{ i }}
</p>

逻辑:

data() {
return {
listElement: [ { name: 1, isShow: true}, { name: 2, isShow: true}],
}
},
computed: {
listElementShow() {
return this.listElement.filter(e => e.isShow); 
}
}
methods: {
toggleElement(index) {
this.listElement[index].isShow = !this.listElement[index].isShow;
}
}

Answer 2

要详细说明这些答案中的一些，您需要使用isHidden标志或类似的方法跟踪隐藏和不隐藏在data对象中的内容。

然后当你使用v-for循环遍历你的对象时，有条件地为当前项目设置isHidden属性。

new Vue({
el: "#app",
data: {
itemList: [{
"id": 1,
"text": "first item",
"isHidden": false
},
{
"id": 2,
"text": "second item",
"isHidden": true,
},
{
"id": 3,
"text": "third item",
"isHidden": false,
},
],
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in itemList" :key="item.id">
<button @click="item.isHidden = !item.isHidden">
<span v-if="item.isHidden">Show</span>
<span v-else>Hide</span>
</button>
<span v-if="!item.isHidden">{{ item.text }}</span>
</li>
</ul>
</div>

Answer 3

你可以这样做:

<template>
<ul class="list-with-hidden-items">
<li
v-for="item in list"
:key="item.id"
@click="showHide(item.id)"
>
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data: () => ({
hidden: {}
}),
methods: {
showHide(id) {
this.$set(this.hidden, id, !this.hidden[id]);
}
}
}
</script>

，然后你可以渲染你想要显示的项目，像这样:

<div v-if="!this.hidden.item1">I am shown because of item1 is not hidden</div>

Answer 4

您可以使用动态绑定的classObject来完成这样的事情。参见类和样式绑定

沙箱

<template>
<div @click="showHide()" :class="{ isHidden: isHidden }">
<p>This is a thing</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
isHidden: false,
};
},
methods: {
showHide() {
this.isHidden = !this.isHidden;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.isHidden {
background-color: grey;
}
div {
background-color: #fff;
}
</style>