v-for 迴圈

在 Vue 裡面想使用 for 迴圈的話,可以使用 v-for 這個指令。

例如:有個 JSON 格式的資料 list,我們想要以 for 迴圈的方式撈出資料並呈現的話,可以在 li 標籤上使用 v-for 來完成。

在撰寫 v-for 這個指令時,我們會使用一個變數(這邊就取名為 item),將它 in 到一個陣列之中,來把 list 陣列的值一個個取出,並存到 item 這個變數上。
取出之後能透過點存取的方式,將資料呈現出來了。

<div id="app">
  <ul>
    <li v-for="item in list">{{ item.name }} 年齡是 {{ item.age }} 歲</li>
  </ul>
</div>

為 v-for 加上索引值 (index)

上述例子中,如果想要知道某個 li 在陣列中是第幾個(索引值),可以把寫法改為 (item, index) 的形式,前面的是 item 的值,後面的是 item 的索引值。

<div id="app">
  <ul>
    <li v-for="(item, index) in list">
      {{ index + 1 }} {{ item.name }} 年齡是 {{ item.age }} 歲
    </li>
  </ul>
</div>

v-if 條件判斷

v-if 通常會與 v-for 迴圈做搭配使用,為迴圈加上條件判斷式。
例如:只顯示年齡小於 25 歲的人,可透過 v-if="item.age < 25" 來篩選,當 item.age 小於 25 的時候,那個項目才會符合條件而呈現在大括號內。

<div id="app">
  <ul>
    <li v-for="(item, index) in list" v-if="item.age < 25">
      {{ index+1 }} {{ item.name }} 年齡是 {{ item.age }} 歲
    </li>
  </ul>
</div>

不過官方建議 v-if 與 v-for 不要在同個標籤中一起使用,建議分開撰寫,例如:

<div id="app">
  <ul>
    <li v-for="(item, index) in list">
      <span v-if="item.age < 25"
        >{{ index+1 }} {{ item.name }} 年齡是 {{ item.age }} 歲</span
      >
    </li>
  </ul>
</div>

透過 v-if 切換呈現的物件

上方有 v-if 的時候,下方緊鄰的元素可以直接使用 v-else 來做出切換物件的效果。
例如:透過 Checkbox 勾選產生的 true/false 來做條件判斷,讓物件一次只會顯示出一個。

<input type="checkbox" id="isSuccess" v-model="isSuccess" />
<label for="isSuccess">切換物件</label>

<div v-if="isSuccess === true">成功!</div>
<div v-if="isSuccess === false">失敗!</div>

Template 標籤

template 標籤用於切換多數 DOM 元素的呈現,通常使用於需要使用 Vue 的指令,但不希望標籤被輸出的時候。

在 template 上使用 v-if,跟在每個元素上設定 v-if 呈現的畫面都一樣。
但是如果有很多個,改用 template 會比較好,因為 template 標籤一樣可以使用 Vue 的指令,但是不會被渲染出來。

<template v-if="showTemplate">
  <tr>
    <td>1</td>
    <td>小美</td>
  </tr>
  <tr>
    <td>2</td>
    <td>昊昊</td>
  </tr>
</template>

<input type="checkbox" id="showTemplate" v-model="showTemplate" />
<label for="showTemplate">啟用元素狀態</label>

v-show 隱藏元素

v-show 的原理是透過新增或移除 display: none 這個 CSS 樣式語法,去切換是否顯示某一個元素。
因為是 display: none,所以這個元素消失後其實還是存在的,只是被隱藏掉而已。

注意!v-if 則是會移除被切換掉的 DOM 元素,因此一次只會顯示一個 DOM 元素。

通常這兩種使用的取捨,會在於畫面上的元素是否要消失,如果要保留就使用 v-show,這樣下次就不必再花時間取得元素哩。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫