vue 动态循环列表怎么点击一个隐藏显示
时间: 2023-09-07 20:03:58 浏览: 51
在Vue中实现动态循环列表点击隐藏和显示的功能可以通过给每个列表项设置一个状态属性来实现。具体步骤如下:
1. 在组件的data中添加一个数组用于存储列表数据,例如:list: []。
2. 在页面中使用v-for指令遍历list数组,渲染出每个列表项。
3. 给每个列表项添加一个点击事件,例如:@click="toggle(index)",其中index为当前列表项的索引。
4. 在组件的methods中定义toggle方法:
```javascript
methods: {
toggle(index) {
this.list[index].isShow = !this.list[index].isShow;
}
}
```
5. 在组件的created生命周期钩子函数中初始化每个列表项的isShow属性,默认为false,即隐藏状态:
```javascript
created() {
for (let i = 0; i < this.list.length; i++) {
this.list[i].isShow = false;
}
}
```
6. 在列表项的模板中使用v-show指令根据isShow属性的值来控制隐藏和显示:
```html
<div v-for="(item, index) in list" :key="index" @click="toggle(index)">
<span>{{item.text}}</span>
<div v-show="item.isShow">内容</div>
</div>
```
这样就可以实现点击列表项时隐藏或显示对应的内容。