v-show点击显示和隐藏
时间: 2023-11-03 11:26:13 浏览: 32
v-show 是 Vue.js 框架中用来控制 HTML 元素的显示和隐藏的指令。你可以将 v-show 指令添加到 HTML 元素中,并将其绑定到某个变量或表达式上,只有当变量或表达式的值为 true 时,对应的 HTML 元素才会显示;当变量或表达式的值为 false 时,对应的 HTML 元素将会隐藏。
相关问题
使用v-show控制代码显示隐藏
可以使用v-show指令来控制代码的显示和隐藏。v-show会根据指定的表达式的值的真假来显示或隐藏元素。当表达式的值为真时,元素会被显示;当表达式的值为假时,元素会被隐藏。
例如,下面的代码会根据showCode的值来显示或隐藏代码块:
```html
<template>
<div>
<button @click="showCode = !showCode">Toggle Code</button>
<pre v-show="showCode">
<code>
// some code here
</code>
</pre>
</div>
</template>
<script>
export default {
data() {
return {
showCode: false
}
}
}
</script>
```
点击Toggle Code按钮会切换showCode的值,从而控制代码块的显示和隐藏。
设置v-show点击显示不同的遍历行
可以通过绑定一个变量来控制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。这样就可以实现点击显示不同的遍历行了。