列表渲染

v-for

实现基于一个数组渲染一个列表

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

其中items是源数据的数组，item是迭代项的别名

在v-for块中可完整地访问父作用域内的属性和变量，v-for也支持使用可选的第二个参数表示当前项的位置索引

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

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

对于多层嵌套的v-for，作用域的工作方式和函数的作用域很类似，每个v-for作用域都可以访问到父级作用域

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

我们也可以使用分隔符“of”代替in“”

 

v-for与对象

用v-for遍历一个对象的所有属性

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

第二三个参数可选，分别表示属性名和位置索引

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

 

在v-for里面使用范围值

<span v-for="n in 10">{{ n }}</span>

 

<template>上的v-for

与v-if类似，同样用于渲染一个包含多个元素的块

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

 

通过Key管理状态

Vue默认按照“就近更新”策略来更新v-for渲染的元素列表，

当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，

确保它们在原本指定的索引位置上渲染，

虽然这样比较高效，但只适用于列表渲染输出的结果不依赖子组件状态或临时DOM状态的情况。

因此需要给Vue一个提示，以便它可以跟踪每个节点的标识从而重用和重新排序现有的元素。可以为每个元素对应的块提供一个唯一的key 属性

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

当使用<tenplate v-for>时，key应该被放在这个容器上

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>