vue --- > v-text、v-show、v-if、v-else

v-text:

<div id = "app">
    <p v-text="msg"></p>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue'
        }
    })
</script>

// 可见v-text在某种程度上等价于 {{}}

v-show:

<div id = "app">
    <div v-show="show1">我将显示</div>
    <div v-show="show2">我将隐藏</div>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            show1:true,
            show2:false
        }
    });
</script>

v-if:

<div id="app">
    <div v-if="show1">我将显示</div>
    <div v-if="show2">我将不存在</div>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            show1:true,
            show2:false
        }
    });
</script>

// 可见v-if为false时,并未渲染到dom中,而v-show为false时,是将display属性置为none.

v-else:

// 和v-if成对出现
<div id = "app">
    <div v-if ="show1">我将显示</div>
    <div v-else>我...</div>
    <div v-if="show2">我不显示</div>
    <div v-else>我好像显示</div>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            show1:true,
            show2:false
        }
    });
</script>

参考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654474&idx=1&sn=70f73eb0b378b7433aaa2721a7bf748f&chksm=872c4375b05bca6356cfdb05f8a29b7fbe74f45152f36ed0745b1bdb940d4d4a0e2960a0c774&scene=21#wechat_redirect