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