Vue 初心者筆記 #2 常用指令 v-bind、v-for、v-if、v-show 介紹
本篇會介紹 v-bind
、v-for
、v-if
、v-show
這幾個 Vue 指令語法,我們在製作 Vue 的專案時,這幾個語法還滿常用到的。
1. 使用 v-bind 動態綁定屬性
v-bind
這個指令可以幫 HTML 標籤的屬性動態綁定一個值,讓資料可以直接反應在 HTML 屬性上。
例如:我把在 data
裡面的 imgSrc
這個變數,綁定在 <img>
標籤的 src
屬性上,這個時候 <img>
標籤就可以使用這個圖片網址的變數。
1 | <div id="app"> |
以上程式碼的渲染結果,其實就等同於 <img src="https://images.unsplash.com/photo" alt="" />
,而且我們這個圖片網址是可以隨著變數更換的呢!
綁定 Class
實務上,v-bind
最常使用的情境是動態綁定 HTML 標籤裡的 class
這個屬性。
例如:我們使用 v-bind
把調整圖片大小的 Class 名稱 img-fluid
綁定上去,讓圖片可以符合網頁大小。
這個
img-fluid
的 Class 是 Bootstrap 4 的語法,沒有使用過也沒關係,總之它是個可以讓圖片的寬度限制在 100% 寬以內的語法
範例程式碼:
1 | <div id="app"> |
2. v-for 迴圈
在 Vue 裡面想使用 for 迴圈的話,可以使用 v-for
這個指令。
例如:假設有個 JSON 格式的資料 list
,我們想要以 for
迴圈的方式撈出資料並呈現的話,可以在 li
標籤上使用 v-for
來完成。
在撰寫 v-for
這個指令時,我們會使用一個變數(這邊就取名為 item
),然後將它 in
到一個 陣列
之中,來把 list
陣列的值一個個取出,並存到 item
這個變數上,取出之後就能透過點存取的方式,將資料呈現出來了。
1 | <div id="app"> |
為 v-for 加上索引值 (index)
上述例子中,如果想要知道某個 li
在陣列中是第幾個(索引值),可以把寫法改為 (item, index)
的形式,前面的是 item
的值,後面的是 item
的索引值。
1 | <div id="app"> |
3. v-if 條件判斷
v-if
通常會與 v-for
迴圈做搭配使用,為迴圈加上條件判斷式。
例如:只顯示年齡小於 25 歲的人,可透過 v-if="item.age < 25"
來篩選,當 item.age
小於 25 的時候,那個項目才會符合條件而呈現在大括號內。
1 | <div id="app"> |
不過官方並不建議 v-if
與 v-for
在同個標籤中一起使用,建議分開撰寫,例如:
1 | <div id="app"> |
切換物件呈現
上方有 v-if
的時候,下方緊鄰的元素可以直接使用 v-else
來做出切換物件的效果。
例如:透過 Checkbox
勾選產生的 true/false 來做「條件判斷」,讓物件一次只會顯示出一個。
一個是
v-if
為true
時顯示
一個是v-if
為false
時顯示
1 | <input type="checkbox" id="isSuccess" v-model="isSuccess" /> |
"isSuccess === true"
也可寫成"isSuccess"
>"isSuccess === false"
也可寫成"!isSuccess"
template 標籤
template
標籤用於切換多數 DOM 元素的呈現。通常使用於需要使用 Vue 的指令,但不希望標籤被輸出的時候。
在 template
上使用 v-if
,與在每個元素上設定 v-if
呈現的畫面都一樣。但是如果有很多個,改用 template
比較好,因為 template
標籤可使用 Vue 的指令,但不會被渲染出來。
1 | <template v-if="showTemplate"> |
3. v-show 隱藏元素
v-show
是透過新增或移除 display: none;
這個 CSS 樣式語法的原理,去切換是否顯示某一個元素。因為是 display: none;
,所以這個元素消失後其實還是存在的,只是被隱藏掉而已。v-if
則是會移除被切換掉的 DOM 元素,因此一次只會顯示一個 DOM 元素。
通常這兩種使用的取捨,會在於畫面上的元素是否要消失,如果要保留就使用 v-show
,這樣下次就不必再花時間取得元素哩。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。