用vue实现一个内容显示或隐藏的功能。要求:1.点击按钮可以将内容隐藏,并将隐藏的内容保存在一个数组当中,2.可以查看隐藏的内容,3.内容是由列表渲染出来并且只能对列表中的某一条数据进行显示隐藏
时间: 2024-03-21 08:40:09 浏览: 20
好的,下面是一个实现:
```vue
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
<div>
<button @click="toggleContent(index)">
{{ item.showContent ? "隐藏内容" : "显示内容" }}
</button>
<div v-if="item.showContent">
<p>{{ item.content }}</p>
</div>
</div>
</li>
</ul>
<div v-if="hiddenContent.length > 0">
<p>以下是已隐藏的内容:</p>
<ul>
<li v-for="content in hiddenContent" :key="content">{{ content }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ content: "内容1", showContent: true },
{ content: "内容2", showContent: true },
{ content: "内容3", showContent: true },
{ content: "内容4", showContent: true },
],
hiddenContent: [],
};
},
methods: {
toggleContent(index) {
const item = this.list[index];
item.showContent = !item.showContent;
if (!item.showContent) {
this.hiddenContent.push(item.content);
} else {
this.hiddenContent.splice(this.hiddenContent.indexOf(item.content), 1);
}
},
},
};
</script>
```
这里使用了一个 `list` 数组来存储要渲染的列表数据,每个数据项包括 `content` 和 `showContent` 两个属性。使用 `v-for` 渲染出来每一个列表项,并且为每个按钮绑定了 `toggleContent` 方法,传入了当前项的索引作为参数。在 `toggleContent` 方法中,根据索引找到对应的数据项,切换 `showContent` 属性的值,并将需要隐藏的内容添加到 `hiddenContent` 数组中或者从 `hiddenContent` 数组中删除。最后,当 `hiddenContent` 数组不为空时,会显示已经隐藏的内容列表。