萌新VueDay2——v-if、v-else、v-show

萌新Vue入门Day2——v-if、v-else、v-show

条件渲染

1.v-if、v-else

用法：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
简单来说：就是根据表达式的值的真假条件，如果是假则把这个标签从内存中移除，就好比下图第一个p标签判断为真，所以第二个p标签将不会显示在html

<div id="test">
    <p v-if="ok">告白成功</p>
    //如果你只有两种情况的话，v-else后面可以写也可以不写
    //<p v-else>告白失败</p>
    <p v-else="!ok">告白失败</p>
    <button @click="okm">切换</button><br />    
    //可以直接在click上修改
    //<button @click="ok=!ok">切换2</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            ok:true
        },
        methods:{
            okm(){
                this.ok = !this.ok
            }
        }
    })
</script>

2.v-show

    <p v-show="ok">告白成功</p>
    <p v-show="!ok">告白失败</p>
    <button @click="ok=!ok">切换2</button>