vue+element 中实现循环数组中的内容,点击一个显示一个的详细情况,点击另一个第一个隐藏
时间: 2024-04-10 14:28:15 浏览: 107
你可以使用 Vue 和 Element UI 来实现循环数组中内容的显示和隐藏。下面是一个示例代码,演示了如何实现这个功能:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in array" :key="index">
<div @click="toggleDetails(index)">{{ item.title }}</div>
<div v-if="index === activeIndex">{{ item.details }}</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
array: [
{ title: 'Item 1', details: 'Details 1' },
{ title: 'Item 2', details: 'Details 2' },
{ title: 'Item 3', details: 'Details 3' },
],
activeIndex: -1,
};
},
methods: {
toggleDetails(index) {
if (this.activeIndex === index) {
this.activeIndex = -1;
} else {
this.activeIndex = index;
}
},
},
};
</script>
```
在上面的代码中,我们使用 `v-for` 指令循环遍历数组中的每个元素,并为每个元素创建一个列表项。当点击列表项的标题时,通过 `toggleDetails` 方法来切换显示和隐藏详情内容。通过判断 `index` 是否等于 `activeIndex` 来决定是否显示详情内容。
希望这个示例能够帮助你实现循环数组内容的显示和隐藏。如有疑问,请随时提问!
阅读全文