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>

閱讀更多 就叫春哥 的文章

關鍵字: 虚拟机 加拿大 新手入门