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>

原文地址:https://www.cnblogs.com/maomao-Sunshine/p/11642882.html