> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vue/08-lie-biao-xuan-ran.md).

# 列表渲染

## 1. `v-for`指令基于一个数组对列表进行渲染

> `item in items` 在items中是原始的数据，而item则是数据中被迭代的数组元素的别名

在`v-for`语句中，我们可以访问$data中的所有属性，也就相当于items作用域的属性

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

vm.$data={
    items:[],
    paraentMessage:"somethings"
}
// v-for中的in可以被of代替
```

## 2.基于对象进行遍历

```javascript
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
vm.$data.Object={
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
```

同样可以遍历对象中的键名和索引

```javascript
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
//渲染后结果
    0.title: How to do lists in Vue
    1.author: Jane Doe
```

## 3.关于`v-for`的维护

​ 为了让Vue能够跟踪每个节点，就需要为每一项提供一个唯一的key属性，除了那种遍历输出到DOM的操作外，作者都建议提供一个唯一的键

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

### 4.数组更新的检测

* 4.1 原数组发生改变的方法
  * push()  添加新的元素到数组尾部
  * pop()  删除数组尾部元素
  * shift() 删除数组头部元素
  * unshift() 添加新的元素到数组头部
  * splice() 用于添加或删除数组中的元素
  * sort()
  * reverse()
* 4.2 不改变原始数组的方法

  这样要改变原始数组的话，就只能将得到的数组赋值给原始数组，**由于vue考虑到重用性，这种替换的方法还是很高效的。并不一定会丢弃现有的DOM去渲染整个列表**

  * filter()
  * concat()
  * slice()
* 4.3 注意事项

  **由于javascripte的限制，当对数组做以下的操作时，并不能够响应式的更新DOM**

  ```javascript
  //使用索引去改变一个元素
  vm.items[index]=value
  //改变数组的长度
  vm.items.length=newLength
  ```

  > 正确的方法

  ```javascript
  Vue.set(vm.items,index,value)
  vm.items.splice(newLength) //自己瞎操作竟然碰到一个知识点
  ```

## 5. 对象变更时注意事项

​ :warning:对于已经创建的vue实例对象，Vue是不允许添加根级别的响应属性的，但是还是可以使用`vue.set()`方法向对象中添加响应式的属性

```javascript
  //使用全局函数Vue.set
  Vue.set(vm.新加属性,"value")
  //使用vue实例方法
  vm.$set(vm.新加属性,"value")
```

```
为已存在的对象添加多个新的属性
```

```javascript
  var vm = new Vue({
    data: {
      userProfile: {
        name: 'Anika'
      }
    }
  })
  //给userProfile添加新的属性age和favoriteColor

  vm.userProfile=Object.assign({},vm.userProfile,{
      age:27,
      favoriteColor:"Green Hat"
  })
```

## 6.在中使用v-for

​ 与v-if的效果类似，带有`v-for`的将会循环的渲染多个元素的内容

​ 不仅可以显示的使用Vue的组件，还可以在标签元素中使用`is=组件名`来避开浏览器的解析错误

> 这里的li标签将会被解析为Vue中注册的组件 todo-item

*