Vue 基础精讲(五)

列表渲染

v-for 把一个数组对应为一组元素

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item of items 形式的特殊语法， list 是源数据数组并且 item 是数组元素迭代的别名, v-for 还支持一个可选的第二个参数为当前项的索引

---

<div v-for="(item, index) of list" >
	<span>{{item}} ---- {{index}}</span>
</div>

var vm = new Vue({
  el: "#app",
  data: {
    list: ["hello","soa","lin"]
  }
})

一个对象的 v-for

可以用 v-for 通过一个对象的属性来迭代,第二个的参数为键名,第三个参数为索引

---

<div v-for="(item, key, index) of userInfo">
  {{item}} ---- {{key}} ---- {{index}}
</div>

var vm = new Vue({
  el: "#app",
  data: {
    userInfo: {
      name: "soalin",
      age: "20",
      gender: "male",
      salary: "500"
    }
  }
})

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id

---

<div v-for="(item, index) of list" :key="item.id">
   {{item.text}} ---- {{index}}
</div>

var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: "010102021",
      text: "hello"    
    }, {
      id: "010102022",
      text: "soa" 
    }, {
      id: "010102023",
      text: "lin" 
    }]
  }
})

数组更新检测

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新

---

• push() // 向数组中添加一个或多个元素
• pop() // 删除数组的最后一个元素
• shift() // 把数组的第一个元素删除
• unshift() // 向数组的开头添加一个或多个元素
• splice() // 向数组中添加/删除项目
• sort() // 对数组的元素进行排序
• reverse() // 对数组进行去取反

set

由于 JavaScript 的限制， 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue,页面不会变动，需要使用

---

Vue.set(vm.items, indexOfItem, newValue)

---

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(vm.userInfo, “s”, “a”) 方法向嵌套对象添加响应式属性

---

<div v-for="(item, key, index) of userInfo">
  {{item}} ---- {{key}} ---- {{index}}
</div>

var vm = new Vue({
  el: "#app",
  data: {
    userInfo: {
      name: "soalin",
      age: "20",
      gender: "male",
      salary: "500"
    }
  }
})

<template>

<template> 可以包裹元素，但是并不会被渲染到页面上

---

<template v-for="(item, index) of list" :key="item.id">
  <div>
    {{item.text}} ---- {{index}}
  </div>
  <span>
    {{item.text}}
  </span>
</template>