vue之列表渲染

居老師的狗子發表於2019-03-11
Vue

一、v-for迴圈用於陣列

v-for 指令根據一組陣列的選項列表進行渲染。

1、v-for 指令需要使用 item in items 形式的特殊語法，items 是源資料陣列名， item 是陣列元素迭代的別名（為當前遍歷的元素提供別名，可以任意起名）。

<ul id="example">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example= new Vue({
  el: '#example',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

輸出：

Foo

Bar

2、v-for 還支援一個可選的第二個引數為當前項的索引，索引從0開始。

<ul id="example">
  <li v-for="(item, index) in items">
   {{ index }} - {{ item.message }}
  </li>
</ul>

輸出：

0-Foo

1-Bar

注：可以用of代替in作為分隔符

<div v-for="item of items"></div>

 

新陣列語法 

value in arr 

(value, index) in arr

 

二、v-for用於物件

 1、v-for 通過一個物件的屬性來遍歷輸出。

<ul id="v-for-object">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

輸出：

John

Doe

30

2、為v-for提供第二個引數為鍵名

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

3、第三個引數為索引：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

新物件語法 

value in obj

(value, key) in obj 

(value, key, index) in obj

三、v-for的key

網上查的資料，那些全部都是一樣的講解演算法，演算法思想看懂了，但是實際操作不成功，覺得都不能很好的深入把demo寫出來。後續要把該問題解決補充。

{

使用v-for的時候，都必須會加上一個必要的key值。v-for 預設行為試著不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個 key 的特殊屬性。

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-for迴圈資料，當用for來更新已經被渲染的元素時，vue的“就地複用”機，是不會改變資料項的順序的，如果想要重新排序，需要為每項新增key（也就是每項的唯一id）

}

按照自己的理解寫的例子，

其一：當在for迴圈中加入新元素，如果只是在末尾（push）新增，不使用key也無所謂，不會重新渲染新增元素之前的元素。只有在for迴圈中間或者開頭新增，如果不使用key，則會引起從新增元素開始，及之後的所有元素的重新渲染。如果假如了key，則只會渲染該加入的元素。

其二：如果在<li v-for="(item,index) in list" v-bind:key="item.id"></li>寫入了index，渲染效果和沒有加key的效果相同，在開頭或者中間加入後面所有都要渲染。（此處不理解網上的寫的例子，後續還是等遇到實際問題，再回來補充解決）

 

eg：不管是用splice還是this.list.unshift({id:this.newid++,name:"新加入元素"})，

 

 

 

<template>
  <div class="content">
    <ul>

      <li v-for="(item) in list"  v-bind:key="item.id">
     name:{{item.name}}-id-{{item.id}}
      </li>
    </ul>
    <button v-on:click="add">新增新元素</button>
  </div>

</template>

 

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      list : [
        {
          id:1,
          name:'test'
        },
        {
          id:2,
          name:'test2',
        },
        {
          id:3,
          name:'test3'
        },
      ],
      newid:4,
    }
  },
  methods:{
    add:function () {
      this.list.splice(2,0,{id:this.newid++,name:"新加入元素"})
    }
  }


}
</script>

 

 

四、陣列變異方法

Vue 包含一組觀察陣列的變異方法，所以它們也將會觸發檢視更新。這些方法如下：

push() 方法和 pop() 方法使用陣列提供的先進後出棧的功能。

  • push()：方法可向陣列的末尾新增一個或多個元素，並返回新的長度，它直接修改 arrayObject，而不是建立一個新的陣列。
  • pop()：方法用於刪除並返回陣列的最後一個元素，把陣列長度減 1，並且返回它刪除的元素的值。如果陣列已經為空，則 pop() 不改變陣列，並返回 undefined 值。
  • shift()：方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值，如果陣列是空的，那麼 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方法不建立新陣列，而是直接修改原有的 arrayObject。
  • unshift()：方法可向陣列的開頭新增一個或更多元素，並返回新的長度，unshift() 方法不建立新的建立，而是直接修改原有的陣列
  • splice()：方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。
  • sort():方法用於對陣列的元素進行排序
  • reverse():方法用於顛倒陣列中元素的順序,該方法會改變原來的陣列，而不會建立新的陣列。

 

相關文章