Vue 2.x 循环元素渲染 v-for 的使用和理解

v-for可遍历这几种数据类型，包括 Array 、Object 、Number 、String
案例如下：

遍历数组

//遍历数组
<!-- v-for 创建一个 列表 -->
原数据：info:[
{
  id: "1",
  name: "name1",
  age: 21
},
{
  id: "2",
  name: "name2",
  age: 22
},
{
  id: "3",
  name: "name3",
  age: 23
},
{
  id: "4",
  name: "name4",
  age: 24
}]
<ul>
  <li v-for="(item , index) in info" :key="item.id">
    <span>
      第{{ index }} 行
    </span>
    <span>
      姓名：{{ item.name }}
    </span>
    <span>
      年龄：{{ item.age }}
    </span>
  </li>
</ul>

1、item 是数组中的 元素 ，index 数组下标 ，key属性，渲染元素排序标识 2、key属性非常重要，直接影响元素排序的正确性 3、key可以是数组的下标index,也可以是元素的其他属性，此处要注意，如果key绑定的是数组元素的下标index,此时操作原数据不可向前插入，只能向后添加。

为什么 key属性绑定 数组下标 index 是不推荐的？

结论：当key绑定数组下标 index 时，只能向后添加源数据。当向前插入数据时，dom元素渲染会出现错位，因而发生页面渲染错误。

遍历对象

//遍历对象
<ul>
  <li v-for="(item) in info" :key="item.id">
    <td v-for="(value,key) in item" :key="value">
      {{key}} == {{ value }}
    </td>
  </li>
</ul>

value 表示 对象中的 值， key表示 对象中的 键

遍历数字

//遍历数字
<ul>
  <li v-for="(item) in info.length" :key="item">
    {{ item }}
  </li>
</ul>

item 输出小于目标数字的数值，如 遍历 5以内的非0数字，，item == 1，2，3，4

遍历字符串

<ul>
  <li v-for="(item) in '12345'" :key="item">
    {{ item }}
  </li>
</ul>

item 输出字符串中的每个字符，，item == 1，2，3，4，5