v-for渲染数据

v-for 用来循环遍历数据，也是 Vue 的知识点，可直接使用 v-for 遍历复杂数组，代码如下。

M 层代码如下。

data() {
  return {
    title: 'hello',
    imgPath: '../../static/logo.png',
    list: [
      {
        id: 1,
        name: '小明1',
        age: 20
      },
      {
        id: 2,
        name: '小明2',
        age: 21
      },
      {
        id: 3,
        name: '小明3',
        age: 22
      }
    ]
  }
}

视图层代码如下。

<template>
  <view class="content">
    <view class="" v-for="(item, i) in list":key="i">
      {{ item.id }}---{{ item.name }}---{{ item.age }}
    </view>
  </view>
</template>

代码解析如下。

使用方法和在 Vue 中一样，注意需要绑定 key 属性。