1 | Vue li v-model
終於來到指令系列的最後一篇。在這個小節中,會為各位讀者介紹如何透過Vue.js的v-if/v-show等指令來對畫面的元素進行條件與流程的控制,以及使用v-for指令來對陣列或物件類型的資料進行迭代渲染。條件判斷v-if/v-show如果要顯示或隱藏模板中的元素,Vue.js提供了兩個指令來幫助我們完成任務,分別是v-show與v-if。兩者的使用方式大同小異:
終於來到指令系列的最後一篇。在這個小節中,會為各位讀者介紹如何透過Vue.js的v-if/v-show等指令來對畫面的元素進行條件與流程的控制,以及使用v-for指令來對陣列或物件類型的資料進行迭代渲染。條件判斷v-if/v-show如果要顯示或隱藏模板中的元素,Vue.js提供了兩個指令來幫助我們完成任務,分別是v-show與v-if。兩者的使用方式大同小異:
終於來到指令系列的最後一篇。 在這個小節中,會為各位讀者介紹如何透過 Vue.js 的 v-if / v-show 等指令來對畫面的元素進行條件與流程的控制, 以及使用 v-for 指令來對陣列或物件類型的資料進行迭代渲染。
條件判斷 v-if / v-show如果要顯示或隱藏模板中的元素, Vue.js 提供了兩個指令來幫助我們完成任務, 分別是 v-show 與 v-if。 兩者的使用方式大同小異:
<div v-if="isShow">v-if</div> <div v-show="isShow">v-show</div>123
就這個範例上來說,這兩者看起來作用似乎一樣,不過實際上它們還是有些不同的地方。
v-showv-show 作用十分單純,就是值為 truthy 就顯示, falsy 則隱藏。
注意,這裡說的是「隱藏」而非移除元素。
讀者不妨開啟瀏覽器的 devtools 來觀察,當 v-if 對應的值為 falsy 時,元素會直接被移除, 而在 v-show 的情況,則是透過 CSS 的 display: none 來將元素隱藏。
v-if前面說過 v-if 雖然與 v-show 同樣都是控制元素是否出現在畫面, 但除了元素的增減之外,v-if 也如同我們所熟知的程式語法般,v-if 還可以與 v-else-if 與 v-else 來與不同條件做搭配:
<div v-if="count === 0">Block A</div> <div v-else-if="count < 5">Block B</div> <div v-else>Block C</div>123
像這樣,我們可以針對不同的條件設定 v-if 、 v-else-if 與 v-else 來判斷何時顯示對應的元素:
另外,若是有多個元素希望同時根據某個條件來切換時,如:
<h1>Title A</h1> <p>Paragraph A ...