vue元素显示隐藏 v-if 和 v-show 指令
v-if 和 v-show
在vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果。
语法
:
<标签 v-if="true/false"></标签><标签 v-show="true/false"></标签><!--true:显示 false:隐藏-->
原理
:
v-if:通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符)。
v-show:通过css控制样式style达成显示、隐藏效果。
- display:none; 隐藏
- display:block; 显示
特点
:
v-if 有更高的切换消耗 ,如果运行条件不大可能改变,则v-if 较合适。
v-show有更高的渲染消耗,如果需要频繁切换,则v-show 较合适。
注意
:
v-if使得元素被隐藏后,这个元素的物理位置有一个名称为<!---->
的占位符,其与html的注释信息没有关系。
案例
:
通过按钮控制,使得元素内容在显示和隐藏之间切换:
<style>#one{width: 300px;height: 40px;background-color:orange;}#two{width: 300px;height: 40px;background-color:lightgreen;}
</style>
</head>
<body><div id="app"><h2>v-if和v-show</h2><button @click="flag=!flag">切换</button><p id="one" v-if="flag">vue指令--v-if</p><p id="two" v-show="flag">vue指令--v-show</p></div><script src="./vue.js"></script><script>var vm = new Vue({el:'#app',data:{flag:false // 控制标签是否显示true/false},});</script>
注意
:
事件驱动不仅可以是methods方法,也可以是简单的js语句。
v-if 和 v-else
在Vue中,v-if 、v-else-if 和 v-else 三个指令结合可以实现多路分支结构。
- v-if 可以单独使用,形成单路分支结构。
- v-if 和 v-else 可以合作使用,实现双路分支结构。
- v-if 、v-else-if 和 v-else 可以合作使用,实现多路分支结构。
语法
:
<标签 v-if="true/false"></标签><标签 v-else-if="true/false"></标签><标签 v-else-if="true/false"></标签><标签 v-else></标签>
注意
:
以上4个标签分支结构,最终只会走一个,第一个为true的那个标签会执行 或 执行v-else。
案例应用
:
判断品牌信息是否存在,并显示对应内容
<table v-if="brandList.length>0">……
</table>
<table v-else><tr><td>没有任何记录!</td></tr>
</table>
注意
:
v-if 和v-else 一并使用,页面没有<!---->
占位符了。
vue元素显示隐藏 v-if 和 v-show 指令相关推荐
- display none 隐藏后怎么显示_web前端入门到实战:元素显示隐藏的9种思路
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...
- CSS常用技巧(元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美)
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
- vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else
v-show与v-if作用 一.v-show 控制元素显示, 通过display: none控制显示 语法: v-show="变量或者表达式" 如果变量或者表达式为true, 会显 ...
- 微信小程序元素显示隐藏方法总结(原生)
目录 前言 一.css实现 总结 前言 我们在日常开发中,或多或少的会遇见一些元素的显示隐藏的需要.这里,我们以vue来举例,在vue中,我们往往通过v-show或者v-if来控制元素的显示和隐藏.但 ...
- 控制 html元素 显示/隐藏
1.编写js函数 <script type="text/javascript">function display(y){$(y).style.display=($(y) ...
- react控制组件的显示或隐藏, 根据state判断元素显示隐藏 , setState不实时生效解决方法
代码实现功能:根据 state 中的值判断子组件显示或隐藏,因为 setState 不是及时生效的,所以不做显示隐藏判断会报错. render() {// 客户经理循环组件function Comme ...
- div元素显示隐藏切换,点击空白位置消失
HTML <div class="clickthis" onclick="showHide()">举例点击这个</div> <di ...
- vue el-table 显示/隐藏列异常-表格数据域高度变小
在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小 ...
- 使用vue控制元素显示隐藏
HTML代码: <div title="意向价格" v-if="showPrise"></div><div title=" ...
最新文章
- http与https的区别,http 1.0与1.1的区别
- 操作系统——MiniDos
- 初学JSP+Servlet常见的错误
- asp.net core 发布到 docker 容器时文件体积过大及服务端口的配置疑问
- 和get redis_SpringBoot整合Redis,你get了吗?
- Java内存模型FAQ(四)重排序意味着什么?
- 替换Oracle,从阿里巴巴到亚马逊-他们在逃离什么?
- 如何创建linux 脚本,如何创建和执行shell脚本
- 易语言钩子DLL注入源码及源码说明
- 互联网晚报 | 06月03日 星期五 | 步步高回应“即将倒闭”传闻、爱彼迎启动房东/房源迁移计划;抖音宣布与中超联赛达成合作...
- iOS8 web下载ipa install App via OTA
- 幂函数衰减系数公式推导(最小二乘法求解一元线性回归方程系数)
- 图 邻接矩阵幂的含义 离散数学定理14.11
- mysql ddl脚本_MySQL在线DDL gh-ost使用总结
- 【Spring Security入门教学】
- SAP 资产会计过账-总账科目的获取
- scrapy抓取dmoz内容
- 美团登录获取cookie
- python生成微信个性签名的词云图
- 【经典】纪念米加艾尔·塔利维尔吉耶夫《春天的17个瞬间》音乐会[部分]