iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
1
自我挑戰組

前端新手筆記-Vue.js系列 第 8

Day8 Vue 指令V-for介紹

  • 分享至 

  • xImage
  •  

前言

昨天介紹了V-bind用法,今天我們就來介紹v-for吧!
本文同步發表於Andy's Blog

參考資料:
官網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-ifv-for 原因

注意事項:

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

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 }


上一篇
Day7 Vue 指令V-bind介紹
下一篇
Day9 Vue指令V-if、V-show介紹
系列文
前端新手筆記-Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言