设置v-show点击显示不同的遍历行
时间: 2023-10-19 21:10:59 浏览: 58
可以通过绑定一个变量来控制v-show的显示与隐藏,然后在点击事件中修改这个变量的值来实现点击显示不同的遍历行。具体实现如下:
```html
<template>
<div>
<div v-for="(item, index) in list" :key="index">
<div @click="toggleShow(index)">
{{ item.title }}
</div>
<div v-show="showIndex === index">
{{ item.content }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showIndex: -1,
list: [
{
title: '行1',
content: '内容1'
},
{
title: '行2',
content: '内容2'
},
{
title: '行3',
content: '内容3'
}
]
}
},
methods: {
toggleShow(index) {
if (this.showIndex === index) {
this.showIndex = -1
} else {
this.showIndex = index
}
}
}
}
</script>
```
在这个示例中,我们通过定义一个showIndex变量来控制v-show的显示与隐藏。当点击某一行时,我们会调用toggleShow方法来修改showIndex的值。如果当前的showIndex等于这一行的索引index,则将showIndex设为-1,否则将showIndex设为这一行的索引index。这样就可以实现点击显示不同的遍历行了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)