07.新手入門vue之v-for

v-for指令介紹

根據一組數組或對象進行列表渲染，當頁面中需要渲染重複的元素時，可以使用v-for指令進行渲染。v-for指令需要使用 item in items的形式進行渲染，通常items是數組或對象。

數組渲染

語法一： v-for="item in 數組"，item是每個數組的元素的值，數組是vue實例data裡的數組，item可以直接使用插值表達式顯示值

<code>


    
    
    <title>Document/<title>


    

        

            
            
{{item}}

        

    




/<code>

語法二：v-for="(item,index)in items" item是每個數組的值，index是數組的下標

<code>


    
    
    <title>Document/<title>


    

        

            
            
            
            
{{item}}-------{{index}}

        

    


 


/<code>

對象渲染

語法： v-for='item in 對象' item對象的每一個屬性值，對象為vue實例data中指定的對象

<code>


    
    
    <title>Document/<title>


    

        

            

                {{item}}
            

        

    
 




/<code>

在使用v-for時,要把一個唯一值賦值給:key屬性(通常是數組的index或者數據的id)

<code>


    
    
    <title>Document/<title>

 

    

        

            
            
            
            
{{item}}-------{{index}}

        

    




/<code>

注意事項

由於 JavaScript 的限制，Vue 不能檢測以下數組的變動：

1. 當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

舉個例子：

<code>var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的/<code>

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應式系統內觸發狀態更新：

<code>// Vue.set
Vue.set(vm.items, indexOfItem, newValue)/<code>

<code>// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)/<code>

你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：

<code>vm.$set(vm.items, indexOfItem, newValue)/<code>

為了解決第二類問題，你可以使用 splice：

<code>vm.items.splice(newLength)/<code>

對象變更檢測注意事項

由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

<code>var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是響應式的

vm.b = 2
// `vm.b` 不是響應式的/<code>

對於已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性。例如，對於：

<code>var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})/<code>

你可以添加一個新的 age 屬性到嵌套的 userProfile 對象：

<code>Vue.set(vm.userProfile, 'age', 27)/<code>

你還可以使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：

<code>vm.$set(vm.userProfile, 'age', 27)/<code>

有時你可能需要為已有對象賦值多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣：

<code>Object.assign(vm.userProfile, {
  age: 27, 

  favoriteColor: 'Vue Green'
})/<code>

可以這樣做：

<code>vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})/<code>

閱讀更多 就叫春哥 的文章

關鍵字: 虛擬機 加拿大 新手入門