Vue.js條件渲染v-if、v-show、v-else-創新互聯

v-if

網站建設哪家好，找成都創新互聯公司！專注于網頁設計、網站建設、微信開發、成都微信小程序、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了齊齊哈爾免費建站歡迎大家使用！

v-if 完全根據表達式的值在DOM中生成或移除一個元素。如果v-if表達式賦值為false，那么對應的元素就會從DOM中移除；否則，對應元素的一個克隆將被重新插入DOM中。




    
    Title



    Hello

greeting取值為true，效果截圖：

Vue.js 條件渲染 v-if、v-show、v-else

greeting取值為false，效果截圖：

Vue.js 條件渲染 v-if、v-show、v-else

template v-if

因為v-if是一個指令，需要將它添加到一個元素上。但是如果想切換多個元素，則可以把

Vue.js 條件渲染 v-if、v-show、v-else

在切換v-if模塊時，Vue.js有一個局部編譯/卸載過程，因為v-if中的模板可能包括數據綁定或子組件。v-if是真實的條件渲染，因為它會確保條件塊在切換時合適地銷毀與重建條件塊內的事件監聽器和子組件。

v-if是惰性的--如果初始渲染時條件為假，則什么也不做，在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。

相比之下，v-show簡單得多----元素始終被編譯并保留，只是簡單地基于CSS切換。

v-show

v-show 根據表達式的值來顯示或隱藏HTML元素。當v-show賦值為false時，元素將被隱藏。查看DOM時，會發現元素上多了一個內聯樣式。


    Hello

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸