vue控制组件的显示和隐藏
时间: 2023-10-31 19:05:41 浏览: 75
Vue 可以通过条件渲染来控制组件的显示和隐藏。
一种常见的方式是使用 `v-if` 指令。该指令根据表达式的值的真假来决定是否渲染元素。例如:
```html
<template>
<div>
<button @click="showComponent = !showComponent">
{{ showComponent ? '隐藏' : '显示' }}
</button>
<div v-if="showComponent">
<p>这是要显示的内容</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showComponent: false
}
}
}
</script>
```
上述代码中,当 `showComponent` 的值为 `true` 时,`<div v-if="showComponent">` 中的内容会被渲染出来。当 `showComponent` 的值为 `false` 时,该 `<div>` 元素不会被渲染出来。
还有一种方式是使用 `v-show` 指令。该指令的用法和 `v-if` 类似,但是 `v-show` 只是控制元素的 `display` 样式属性,不会在 DOM 树中添加或删除元素。例如:
```html
<template>
<div>
<button @click="showComponent = !showComponent">
{{ showComponent ? '隐藏' : '显示' }}
</button>
<div v-show="showComponent">
<p>这是要显示的内容</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showComponent: false
}
}
}
</script>
```
上述代码中,当 `showComponent` 的值为 `true` 时,`<div v-show="showComponent">` 中的内容会以 `display: block` 的样式显示出来。当 `showComponent` 的值为 `false` 时,该 `<div>` 元素会以 `display: none` 的样式隐藏起来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)