代码如下,
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>