vue学习笔记 循环遍历v-for

vue循环遍历v-for

1、v-for遍历数组
只获取元素值时：<li v-for="item in books">{{item}}</li>
例子：

<div id="div1">
  <ul>
    <li v-for="item in books">{{item}}</li>
  </ul>
</div>
// books: ['《132》', '《213》', '《321》', '《123》']

获取元素值和对应下标时：<li v-for="(item, index) in books">{{index}} + {{item}}</li>
例子：

<div id="div1">
  <ul>
    <li v-for="(item, index) in books">{{index}} + {{item}}</li>
  </ul>
</div>

2、v-for遍历对象
只获取value值时：

<div id="div1">
  <ul>
    <li v-for="value in info">{{value}}</li>
  </ul>
</div>
/* info: {
        name: "bsy",
        age: 18,
        height: 1.89
      } */

注：
在循环遍历中只有一个变量时，那么这个值是value值。（和变量的名字是什么没有关系）
获取value和key值时：

<li v-for="(value, key) in info">{{value}}->{{key}}</li>
// 其余相同

获取value、key和index下标值时：

<li v-for="(value, key, index) in info">{{value}}->{{key}}->{{index}}</li>
// 其余相同

v-for使用过程中添加key值：
在使用过程中多添加 :key 来进行复用：用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。总的来说，添加key的作用是为了高效地更新虚拟DOM。
例子：

<div id="div1">
  <ul>
    <li v-for="item in books" :key="item">{{item}}</li>
  </ul>
</div>