Vue_1-4_条件渲染指令v-if、v-else、v-show

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

    <!--
    1.条件渲染指令v-if、v-else、v-show
    2.比较v-if和v-show，如果需要频繁切换 v-show 较好
        v-if    直接把标签移除，所以符合条件时，需要先创建，再显示
        v-show  通过display:none样式隐藏标签 显示时直接修改样式即可，顾速度更快
    -->
    <div id="app">
        <p v-if="ok">成功了</p>
        <p v-else>失败了</p>
        <!-- <p v-else="true">失败了</p>等价于上一句 -->
        <button @click="ok=!ok">切换</button>
        <!-- @click="这里可以写语句，也可以调用方法" -->
        <p v-show="ok">及格了</p>
        <p v-show="!ok">挂科了</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                ok:false,
            }
        })
    </script>