Vue指令V-for介紹

V-for

用途：

將資料列表列渲染出來

簡介：

v-for 指令需要使用 item in items 形式來做撰寫
而v-for會因為後方items接的是 物件 還是 陣列而傳入不同對應內容

1.以陣列為例：

假設todos是一個陣列
<li v-for=“(Todo,8) in todos”>
Todo：回傳的是陣列中的屬性值
8 ：回傳的是陣列中的索引值
小結論：
（）括號中的參數都可以自行命名，
但是第一個會回傳一定是陣列中屬性值，第二個才是索引值

2.以物件為例：
範例：v-for=“(val, name, index) in object”
小結論：參數中名字都可以自行更換，但每個參數位置會回傳的值都是固定的
如：範例一定會先回傳物件中屬性值、接著才是屬性名稱、最後才是索引

二、建議，基本上v-for參數撰寫，就是照著官網提供對應參數位置填寫即可

範例：v-for + index

<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>

<script>
  var app = new Vue({
    el: '',
    data: {｀
      list: [
        {
          name: '小明',
          age: 16
        },
        {
          name: '媽媽',
          age: 38,
        },
        {
          name: '漂亮阿姨',
          age: 24
        }
      ]
    }
  })
</script>

範例：v-for + range

注意：
1.範圍n只能是整數
2.range 索引 item由 1 開始計算

         <ul>
            //範例：<li v-for="item in n">
            <li v-for="item in 7">
              {{ item }}
            </li>
          </ul>
渲染結果：
1234567

範例：過濾資料（filter）

<p>請製作過濾資料</p>
<input type="text" class="form-control" v-model="filterText" @keyup.enter='filterData'>
<ul>
<li v-for="(item, key) in filterArray" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 
<input type="text">
</li>
</ul>

filterArray: [],
filterText: ''

filterData: function () {
var vm = this; //這邊的this指的是取得Data中資料
vm.filterArray = vm.arrayData.filter(function (item) {
console.log(vm.filterText, item.name, item.name.match(vm.filterText))
 // console.log這行是為了檢查輸入文字跟陣列中是否相同
return item.name.match(vm.filterText);
// 如果是true則直接回傳到filterArray陣列中
})
},

補充討問：

vm 使用情境？討論連結
因為要使用 filter() 這個函式，所以將 vm = this ，如果沒有使用到處理陣列的函式( forEach, filter, map, find…)，就可以直接用 this 了

範例：在Template上使用v-for

<h4>Template 的運用</h4>
  <p>請將兩個 tr 一組使用 v-for</p>
  <table class="table">
    <!-- template不會輸出 -->
    <template v-for="item in arrayData">
      <tr>
        <td>{{item.age}}</td>
      </tr>
      <tr>
        <td>{{item.name}}</td>
      </tr>
    </template>
  </table>

補充：維護狀態

主要說明v-for更新原理是使用就地更新（in-place patch）方式，不會移動DOM元素（用下方例子說明就是input位置不變），僅會更新arrayData陣列中的資料

若還不清楚，可以參考同學整理結果
問題：DOM元素內容不更換的話，會造成網頁渲染畫面出錯
改善方式：提供一個唯一key屬性
如下範例：

<li v-for="(item, key) in arrayData" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 
<input type="text">
</li>

v-for與v-if一同使用

當它們處於同一節點，v-for的優先級比v-if更高
官網表示不推薦在同一元素是使用v-if和v-for 原因

注意事項：

Vue不能監測下列情況的陣列
1.利用索引直接設置一個陣列如：

1
2
3

this.arrayData[0]={
name:’強尼’
},

2.修改陣列長度時如：this.arrayData.length = 0;
該如何修正錯誤呢？
使用Vue.set 先附上參考資料
寫法：Vue.set( target, propertyName/index, value )
範例：javascript Vue.set(this.arrayData, 0, { name: '強尼', age: 8 }