Vue js在单击时显示隐藏元素
Vue js在单击时显示隐藏元素
提问于 2021-09-23 07:04:46
我是vue js的新手。我想在单击时显示隐藏元素。所以我可以做什么-在数据对象中创建一个属性，比如
isHidden: false并添加一个类似这样的方法
showHide(){
return this.isHidden = !this.isHidden;
}并在单击事件上绑定showHide方法，如下所示
<li @click="showHide">Some text</a>但问题是-如果有几个列表项目绑定了相同的单击事件，则所有列表都将在单击时显示，或者全部隐藏。但我希望目标元素只能通过单击来显示或隐藏。
我该怎么做呢？
回答 4
Stack Overflow用户
发布于 2021-09-23 09:13:03
您可以使用一些数据来确定要显示/隐藏的元素。例如: 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;
}
}Stack Overflow用户
发布于 2021-09-23 07:17:19
你可以这样做：
<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>Stack Overflow用户
发布于 2021-09-23 07:20:48
您可以使用动态绑定的classObject来做这样的事情。请参阅Class and Style Bindings
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69295352
复制相关文章
相似问题
腾讯云开发者
