vue如何设置元素的显示隐藏

简介: 方法:可以使用v-if,也可以使用v-show指令。

方法:可以使用v-if,也可以使用v-show指令。


v-if 指令,通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素;


v-show 指令,通过设置DOM元素的display样式属性来控制显隐。



区别:


v-if 会直接删除元素


v-show 只是隐藏,只是简单地切换元素的 CSS 属性display。



v-show 示例:


比如想要 隐藏 下面这个 按钮 那么给这个 div 加一个 v-show 的属性,名字我写的showButton,


<div v-show="showButton">


<Button>按钮</Button>


</div>


设置 showButton 的默认值为 false ,默认是不显示,shouButton的值为true时显示。



话不多说,上代码截图:

e4d1c4b2fc314ba880c914954b829841.png


当触发事件时修改show的值

6c224a5cfd4046a0a31f85381f8eda97.png

这样就完成了~

目录
相关文章
|
1天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
8 3
|
1天前
|
JavaScript
vue知识点
vue知识点
12 3
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程元素选择区面板的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程元素选择区面板的升级修改
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable其它元素(目前主要是元素文档)的升级修改
ruoyi-nbcio-plus基于vue3的flowable其它元素(目前主要是元素文档)的升级修改
|
1天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
1天前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
989 0
|
1天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
22 0