vue.js中的条件渲染(v-if/v-else/v-else-if/v-show)
来源:互联网 发布:做淘宝客服是在家做吗 编辑:程序博客网 时间:2024/06/06 12:29
1、在vue,.js中使用v-if进行条件判断,可以使用v-else指令给v-if添加一个else块,v-else指令必须紧跟在v-if或者v-else-if元素的后面,否则它将不会被识别。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
<!-- 使用v-if进行条件渲染 --> <div id="#app"> <p v-if="ok">加油,你是最棒的</p> </div> <script> new Vue({ el:"#app", data:{ ok:true } }) </script>
<!-- 使用v-if和v-else --> <div id="app"> <p v-if="ok">加油,你是最棒的</p> <p v-else>你要继续加油哦</p> </div> <script> new Vue({ el:"#app", data:{ ok:true } }) </script>
2、因为v-if是一个指令,所以必须将它添加到一个元素上,如果想要切换多个元素,此时可以将一个<template>元素当做不可见的包裹元素,并在上面使用v-if进行渲染分组,最终的渲染结果将不包含<template>元素
<!-- 在template上使用v-if进行渲染分组 --> <div id="app"> <template v-if="ok"> <h1>今天是新的一周</h1> <p>你要加油哦</p> </template> <template v-else> <h1>今天是新的一周</h1> <p>你要继续努力</p> </template> </div> <script> new Vue({ el:"#app", data:{ ok:false } }) </script>
3、v-else-if是在vue.js2.1.0中新增的,用作v-if的else-if块,可以链式的多次使用
<!-- 使用v-else-if --> <div id="app"> <p v-if="type==='A'">A</p> <p v-else-if="type==='B'">B</p> <p v-else>notA/B</p> </div> <script> new Vue({ el:"#app", data:{ type:'C' } }) </script>
4、另一个用于根据条件展示元素的选项是v-show指令,不同的是带有v-show的元素始终会被渲染并保留在DOM中,简单的说v-show只是简单地切换元素的css属性的display,但是v-show不支持template元素,也不支持v-else。
<!-- 另一个根据条件展示元素的指令v-show --> <div id="app"> <p v-show="ok">我是v-show</p> </div> <script> new Vue({ el:"#app", data:{ ok:false } }) </script> <!-- 展示结果中相当于给p元素添加了display:none的样式 -->
5、v-if&v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
【练习题】
1、随机生成一个数字,判断是否大于0.5,然后输出对应的信息
<!--随机生成一个数字,判断是否大于0.5,然后输出对应的信息 --> <div id="app"> <p v-if="num>0.5">随机产生的数字{{num}}大于0.5</p> <p v-else>随机产生的数字{{num}}小于或者等于0.5</p> </div> <script> new Vue({ el:"#app", data:{ num:Math.random() } }) </script>
- vue.js中的条件渲染(v-if/v-else/v-else-if/v-show)
- v-if v-else v-show 指令
- VUE条件渲染(v-if v-show v-for)
- vue v-if v-else v-else-if
- 6-Vue指令之条件渲染 V-if/else
- Vue v-if v-show
- VUE中的v-if与v-show
- Vue 中的 v-if 和 v-show
- Vue v-if条件渲染
- Vue.js学习笔记:v-if条件渲染与v-show区别
- vue v-if v-else-if v-else 的简单使用
- vue中的tab切换(v-show,v-if)
- VUE指令条件渲染v-if
- Vue.js 中 v-if 和 v-show 的区别
- Vue.js 中 v-if 和 v-show 的区别
- 对于v-if 和 v-show的选择 --Vue.js
- vue.js之v-show 与 v-if
- 【原理】vue的v-if和v-else、v-bind实现的登录界面案例
- 如何使用J-Link烧录bin文件
- 响应式布局 移动到下方
- java内部类
- C++学习笔记【第三部分第十五章:面向对象程序设计】
- swift 之NSClassFromString
- vue.js中的条件渲染(v-if/v-else/v-else-if/v-show)
- 【Scikit-Learn 中文文档】分解成分中的信号(矩阵分解问题)
- mame 0.191编译配置
- 使用图片轮播Swiper4后台SpringMVC报错PageNotFound
- WaitForMultipleObjects用法详解,一看就懂
- 【Scikit-Learn 中文文档】协方差估计 / 经验协方差 / 收敛协方差 / 稀疏逆协方差 / Robust 协方差估计
- Unity3d 计算日期差、时间差
- 初步了解 ConstraintLayout
- Jqery 划入划出等特效