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