第 4 節： 進階模板語法介紹

31. v-for 與其使用細節

要在現有的 Vue 物件內寫入或修改資料，必須使用 Vue.set() 的方式來進行，不能使用一般在撰寫 JavaScript 的方式來操作物件，例如：

this.arrayData.length = 0;

或是

this.arrayData[0] = {
    name: '小強',
    age: 99,
}

用這些方法雖然會在 Console 內顯示儲存在該物件的資料已經被改變了，但效果並不會反應在畫面上。透過 Vue.set() 這樣的方式，才能夠成功修改儲存在 Vue 物件內的資料，例如：

Vue.set(this.arrayData, 0, {
    name: '小強',
    age: 99,
})

代入括號內的三個數值分別為：

Vue.set(（要新增項目的目標）, （索引值，要將資料新增在目標內的何處）, （要新增的數值）)

該章節的練習手冊

32. v-if 與其使用細節

在一個 HTML 元素內加入 v-if 或是 v-show，即可在判斷條件為 true 或 false 的情況下顯示該物件。範例如下：

<div class="alert alert-success" v-if="isSuccess">成功!</div>
<div class="alert alert-danger" v-if="!isSuccess">失敗!</div>

<div class="form-check">
<input type="checkbox" class="form-check-input" id="isSuccess2" v-model="isSuccess"/>
<label class="form-check-label" for="isSuccess2">啟用元素狀態</label>
</div>

當 isSuccess 為 true 時，顯示含有成功字樣的 <div> 元素，反之，則顯示含有失敗字樣的 <div> 元素。

上方 <div> 內的程式碼還可以改寫成這樣：

<div class="alert alert-danger" v-else>失敗!</div>

當含有 v-if 屬性的 HTML 元素的條件不成立時，就執行含有 v-else 的 HTML 元素。

---

可以將 v-if 作為 <template> 標籤的屬性，並把要切換顯示與隱藏的元素給放進去，這樣一來就只需要將屬性撰寫在一個地方即可，例如原本的：

            <table class="table">
              <thead>
                <th>編號</th>
                <th>姓名</th>
              </thead>
                <tr v-if="showTemplate">
                  <td>1</td>
                  <td>安妮</td>
                </tr>
                <tr v-if="showTemplate">
                  <td>2</td>
                  <td>小明</td>
                </tr>
            </table>

可以改寫成：

              <thead>
                <th>編號</th>
                <th>姓名</th>
              </thead>
              <template v-if="showTemplate">
                <tr>
                  <td>1</td>
                  <td>安妮</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>小明</td>
                </tr>
              </template>

---

v-show 與 v-if 的差別在與，v-show 是透過為元素加上 display: none 的方式來隱藏元素，而 v-if 則是把該元素從 DOM 節點上整個移除。

該章節的練習手冊

33. Computed 與 Watch