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

總結

以上是生活随笔為你收集整理的vue --- v-text、v-show、v-if、v-else的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。