4.vue的v-if和v-show条件渲染

代码如下,

1. v-if用于条件渲染-必须条件为真,才会渲染  判断taye的值,就是JavaScript的表达式,满足条件为B则B 显示 ,v-if是真正的条件渲染,不满足不渲染,也为惰性渲染

2.v-show 用于根据条件展示某一个元素, 如果满足,则显示,如果不满足, 则为隐藏, 页面可检查到元素, 展示方式为 display: none; ,不管什么条件都渲染, 通过css隐藏和展示

3.如果频换的切换v-show, v-show更高的初始化开销

4.如果运行条件很少改变v-if,有更高的切换开销

 

 

<div id="app">
<div v-if="type === ‘A‘">
A
</div>
<div v-else-if="type === ‘B‘">
B
</div>
<div v-else-if="type === ‘C‘">
C
</div>
<div v-else>
Not A/B/C
</div>
<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">

var vm = new Vue({
el : "#app",
data : {
type : "B", ok : true }});</script>

相关文章

Java中的String是不可变对象 在面向对象及函数编程语言中,不...
String, StringBuffer 和 StringBuilder 可变性 String不可变...
序列化:把对象转换为字节序列的过程称为对象的序列化. 反序...
先说结论,是对象!可以继续往下看 数组是不是对象 什么是对...
为什么浮点数 float 或 double 运算的时候会有精度丢失的风险...
面试题引入 这里引申出一个经典问题,看下面代码 Integer a ...