V-for 的使用

不管事陣列資料還是物件資料都可以使用v-for!
差別在於 陣列的索引 為0開始的數值，而 物件的索引 為物件的屬性

為什麼要加上 Key?

key 的用途就是用來辨識 virtual DOM 的更新情況，其中 virtual DOM 的特性之一就是會重複使用原本的組件，要更新時不會整個組件的 DOM 元素砍掉然後再全部渲染一次，而是只更新部分資料，這樣做可以提升效能。
若在v-for渲染的項目中沒有加入key，預設的行為是當數據順序改變時，vue會就地更新（In-place patch）進行變更，也就是說Vue不會移動任何DOM元素來配合數據順序，只是就地去更新項目內容確保他們在每個索引位置正確的渲染。

Key 建議使用 id 或是 唯一值

過濾用法

過濾 也是 v-for 常常會做到的功能
要過濾資料的話你可以這樣做:

1. 原始資料陣列 dataArray=[]
2. 建立過濾資料的陣列 filterDataArray=[]
3. 建立過濾資料的針對文字 filterText=''
   (通常這個會與input做雙向綁定 v-model)
   (我們會利用針對文字來過濾dataArray並放入filterDataArray中)
4. filter() 觸發過濾行為

    filter(){
        this.filterDataArray = this.dataArray.filter(
            function(item){
                利用 this.filterText 、 item物件內容 做過濾
            }
        )
    }
   

純數字的迴圈

<ul>
    <li v-for="item in 10">{{item}}</li>
</ul>

Template 標籤運用

表格與v-for運用

<table class="table">
    <template v-for=" item in arrayData">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </template>
</table>

v-for 與 v-if 同時運用

當兩個同時使用時，會先執行 v-for 再執行 v-if

<ul>
    <li v-for="(item, key) in arrayData" v-if="item.age <= 20">
        {{ key }} - {{ item.name }}  {{ item.age }} 歲
        {{  }}
    </li>
<ul>

不能運作的狀況

1. 直接修改陣列長度this.dataArray.length = 0 -> 出錯，畫面不會更改

2. 直接使用陣列索引的方式操作(修改)內容this.dataArray[0]={data: newdata;} -> 出錯，畫面不會更改。(解決方法: Vue.set())
   範例:

   Vue.createApp({
    data(){
        dataArray:[
            data1:{ name : 'abby'},
        ]
    },
    methods:{
    //使用陣列索引的方式操作(修改)內容，不能運作
    cantWorkEdit(){
        this.dataArray[0]={
            name: 'jake'
        }
    }
   
    //解決方法 Vue.set()
    Vue.set(this.dataArray, 0, 'jake')
    }
   })
   

什麼時候要用Vue.set()?

當我們要操作的資料，本來不在data上，就需要用Vue.set()來將資料寫入data內。
使用Vue.set()強制將資料寫入

用法

Vue.set(target, key, value)
//target: 要針對的目標
//key: 索引 or key
//value: 值(可以是物件)