V-for 的使用


Posted by hoyi-23 on 2021-08-05

不管事陣列資料還是物件資料都可以使用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: 值(可以是物件)


#v-for







Related Posts

Day 160

Day 160

IC Design Contest Cell-Based 考古題 分享 及 比賽心得

IC Design Contest Cell-Based 考古題 分享 及 比賽心得

JS 字串拼接 Template Literals

JS 字串拼接 Template Literals


Comments