vue2中<div v-for="(item, index) in list" :key="item.id" @click="choose(index)"><p >{{ item.name }}</p></div>,如何通过choose点击事件,切换当前点击元素的显示与隐藏
时间: 2024-04-24 07:26:23 浏览: 17
你可以通过在choose方法中维护一个状态来控制元素的显示与隐藏。你可以给每个item添加一个布尔类型的属性,用于表示元素的显示状态。然后,通过点击事件调用choose方法,将当前点击元素的显示状态取反。
在Vue 2中,你可以使用v-show指令来根据元素的显示状态来控制元素的显示与隐藏。
以下是修改后的代码示例:
```html
<div v-for="(item, index) in list" :key="item.id" @click="choose(item)">
<p>{{ item.name }}</p>
<p v-show="item.show">{{ item.description }}</p>
</div>
```
```javascript
data() {
return {
list: [
{ id: 1, name: 'Item 1', description: 'Description 1', show: false },
{ id: 2, name: 'Item 2', description: 'Description 2', show: false },
{ id: 3, name: 'Item 3', description: 'Description 3', show: false },
// ...
]
};
},
methods: {
choose(item) {
item.show = !item.show;
}
}
```
在上面的代码中,给每个item对象添加了一个名为show的属性来表示元素的显示状态,默认为false。在choose方法中,通过取反操作将show属性的值切换为true或false。然后,在p元素上使用v-show指令,根据item.show的值来控制元素的显示与隐藏。当点击对应的div元素时,choose方法会被调用,从而切换当前点击元素的显示状态。