Vue之条件渲染

条件渲染

---

1.v-if

条件性的渲染一块内容 指令中的表达式返回为true的时候渲染 反之为false 不渲染

    <p v-if="first">one</p>
    <p v-if="second">two</p>
    <p v-if="third">null</p>

new Vue({
        el:"#second",
        data:{
            first:true,
            second:false,
            third:null,
        }
    })

2. v-else

v-else指令来表示v-if的else块 如果v-if块表达式为false 不被渲染 则渲染对应的v-else 块

    <p v-if="first"> v-if块1</p>
    <p v-else> v-else块1</p>
    <p v-if="second">v-if块2</p>
    <p v-else> v-else块2</p>

 new Vue({
        el:"#second",
        data:{
            first:true,
            second:false
        }
    })

3.v-show

也是根据条件展示元素 条件为true 展示 反之 不展示

不同的是 v-show的不显示 只是类似于不显示 display：hidden ，元素仍然保存在DOM中

<div id="first">
    <p v-show="one">hello world</p>
    <p v-show="two">hello world</p>
</div>
<script>
    new Vue({
        el:'#first',
        data:{
            one:true,
            two:123
        }
    })
</script>

v-if 与 v-show 的对比

1. v-if是真正的条件渲染 ，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2. v-show 是虚假的条件渲染 不管是true或者false ,元素都会被渲染，显示隐藏只是CSS进行切换

---

	v-if	v-show
切换开销	高	低
渲染开销	低(开始只渲染为true的块)	高(所有块都渲染 只不过是false块不显示)
适用条件	条件很少改变 不经常切换	非常频繁的切换