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

Posted 2020-11-15 maomao-sunshine

代码如下，

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>