v-for使用

v-for 指令 in后面的可迭代的 类型有

1.  普通数组
2.  对象数组
3.  对象

<el-form
    :model="formData"
  >
 <!-- v-for 遍历 普通数组 -->
    <el-form-item
      label="选项"
    >
      <el-select
        v-model="formData.types"
        placeholder="please select types"
      >
        <el-option
          v-for="(item, index) in typeList"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
   
  <!-- v-for 遍历 对象数组 -->
    <el-form-item
      label="选项"
    >
      <el-select
        v-model="formData.status"
        placeholder="please select status"
      >
        <el-option
          v-for="(item, index) in statusList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    
   <!-- v-for 遍历 对象 -->
    <el-form-item
      label="选项"
    >
      <el-select
        v-model="formData.area"
        placeholder="please select area"
      >
        <el-option
          v-for="(val, key, index) in areaList"
          :key="index"
          :label="val"
          :value="key"
        />
      </el-select>
    </el-form-item>
</el-form>

// js 部分
// el-form中 :model 绑定的数据是响应式的（reactive），否则，选择框里就不会显示所选数据
    const formData = reactive({
      region: '',
      types: '',
      status: '',
      area: ''
    }) 
    const typeList = reactive([
          1,
          2,
          3,
          4,
          5
     ])

    const statusList = reactive([
      {
        id: 1,
        name: 'zs',
        age: 11
      },
      {
        id: 2,
        name: 'ls',
        age: 12
      }
    ])

    const areaList = reactive({
      1: 'China',
      2: 'US'
    })