5.条件渲染指令

条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。

5.1.v-if指令

当v-if的值为false时，网页中将不会对此元素进行渲染

<div id="app">
    <div v-if="isShow">DOM元素的样式绑定</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow:false
        }
    });
</script>

5.2.v-else指令和v-else-if指令

我们可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。

<div id="app">
    <div v-if="type==1">A</div>
    <div v-else-if="type==2">B</div>
    <div v-else-if="type==3">C</div>
    <div v-else>D</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            type:2
        }
    });
</script>

5.3.v-if指令和v-show指令

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 是简单地切换元素的 CSS 属性 display 。

<div id="app">
    <div v-if="isShow">这里是v-if</div>
    <div v-show="isShow">这里是v-show</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow:false
        }
    });
</script>

通过上面的例子，我们不难发现两者的不同：

1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2. v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
3. v-if有很高的切换开销，适用于条件不太容易改变的时候
4. v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
5. v-show有很高的初始渲染开销，适用于非常频繁地切换

5.4 控件的复用

<div id="app">
    <span v-if="userUser">
        <label for="username"> 用户名</label>
        <input type="text" id="username" placeholder="请输入用户名"  key="username"/>
    </span>

    <span v-else>
        <label for="email"> 邮箱</label>
        <input type="text" id="email" placeholder="请输入邮箱" key="email"/>
    </span>

</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            userUser:true
        },
    });
</script>