5、Vue条件渲染指令v-show、v-if、v-else&v-else-if

---

1、v-show

作用：通过判断，是否显示该内容。如果值为true，则显示，否则就隐藏。
语法：v-show=”判断表达式”
特点：元素会始终渲染在DOM中，只是被设置了display:none;

<div id="app">
        <h1 v-show="isshow">isshow为true时，我才会显示</h1>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               isshow:true
           }
       })
    </script>

2、v-if

作用：判断是否加载固定的内容，如果为真，就加载，否则不加载。
语法：v-if=”判断表达式”
特点：控制元素插入或删除，而不是隐藏(v-show)

 <div id="app">
        <h1 v-if="isshow">isshow为true时，我才会显示</h1>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               isshow:false
           }
       })
    </script>

通过实例，我们发现使用v-if且值为false时，那么对应的dom也会被删除，而v-show则只是将css修改成display：none。因此v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。v-if有更高的切换开销，v-show有更高的初始渲染开销，如果需要频繁切换，v-show比较好，如果改变少，则v-if更好。

3、v-else&v-else-if

v-else作用：v-else要紧跟在v-if后面，表示v-if条件不成立时执行。
v-else-if作用：表示多次，在v-if和v-else中间。
举例：

<div id="app">
        <input type="text" v-model="age">请输入年龄
        <p v-if="age < 18">未成年</p>
        <p v-else-if=" age <40">青年</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               age:"1",
           }
       })
    </script>