1-4 列表渲染

   列表渲染：

            v-for

            每个列表都要添加key，如果不添加不会有错误，但是会有警告

html:

<div>
    <ul>
      <!-- index是索引 -->
      <li v-for="(value, index) in names">
        {{index }}: {{ value }}
      </li>
    </ul>
    <ul>
      <!-- v-bind 来绑定动态值 (在这里使用简写成 ： -->
      <li v-for="(item,index) in user" :key="index">
        <span>{{index}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </li>
    </ul>
    <!-- 第二个的参数为键名：第三个参数为索引： -->
    <ul>
        <li v-for="(value, key, index) in object">
           {{ index }}：{{ key }}: {{ value }}
        </li>
    </ul>
  </div>

js

data() {
    return {
      names: [
        "iwen", "iw", "wen"
      ],
      user: [
        { name: "iwen", age: 19 },
        { name: "iw", age: 20 },
        { name: "wen", age: 29 }
      ],
      object: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }

    }
  }

最终效果：