vue中点击展开,再点击收起,怎么实现,用v-for来做
时间: 2023-09-08 10:00:47 浏览: 120
在Vue中实现点击展开和收起的效果,可以通过使用v-for指令来实现。以下是一个实现的示例:
在Vue的data中定义一个属性,用于标识当前是否展开,例如`isExpanded`为false表示未展开,为true表示展开。另外,还需要定义一个数组,用于存储展示的数据,例如`dataList`。
在模板中,使用v-for指令遍历`dataList`数组,渲染每个数据项。同时,给展开按钮绑定一个点击事件,当点击展开按钮时,将`isExpanded`属性的值设为true,表示展开。给收起按钮绑定点击事件,当点击收起按钮时,将`isExpanded`属性的值设为false,表示收起。
绑定展开和收起按钮的显示状态,可以使用三元表达式来根据`isExpanded`判断当前展开还是收起的状态,从而显示不同的按钮。
下面是示例代码:
```
<template>
<div>
<div v-for="item in dataList" :key="item.id">
<div>{{ item.content }}</div>
<button v-if="!isExpanded" @click="expand">展开</button>
<button v-else @click="collapse">收起</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false,
dataList: [
{ id: 1, content: '内容1' },
{ id: 2, content: '内容2' },
{ id: 3, content: '内容3' }
]
}
},
methods: {
expand() {
this.isExpanded = true;
},
collapse() {
this.isExpanded = false;
}
}
}
</script>
```
在上述示例中,通过`v-if`和`v-else`来根据`isExpanded`的值显示不同的按钮。初始状态下,展示的内容只有一个展开按钮,点击展开按钮后,展示该项的内容并显示收起按钮,再次点击收起按钮则隐藏内容并显示展开按钮。