vue学习：v-if、v-show、v-else和v-else-if

vue学习：v-if、v-show、v-else和v-else-if

v-if: 条件判断，当得到结果为true时，所在的元素才会被渲染。
v-show：当得到结果为true时，所在的元素才会被显示。

<div id="app">
    <!-- 
        v-if: 条件判断，当得到结果为true时，所在的元素才会被渲染。
        v-show：当得到结果为true时，所在的元素才会被显示
    -->
    <button @click="show = !show">点我呀</button>
    <h1 v-if="show">v-if.....</h1>
    <h1 v-show="show">v-show.....</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            show:true
        }
    });
</script>

页面展示：

点击按钮后：

v-else和v-else-if：

 <div id="app">
   	 <button @click="random=Math.random()">点我呀</button>
     <span>{{random}}</span>
     <h1 v-if="random >= 0.75">
         看到我啦？！ &gt;=0.75
     </h1>
     <h1 v-else-if="random >= 0.5">
         看到我啦？！ &gt;=0.5
     </h1>
     <h1 v-else-if="random >= 0.2">
         看到我啦？！ &gt;=0.2
     </h1>
     <h1 v-else>
         看到我啦？！ &lt;=0.2
     </h1>
 </div>
 <script src="../node_modules/vue/dist/vue.js"></script>
 <script>
     new Vue({
         el: '#app',
         data:{
             random:1
         }
     });
 </script>