element-ui v-for循环Form表单

应用场景： 当你出现一个字段不同 数量不同的表单 你又不能写死 这时就需要v-for来循环表单

data () {
  return {
    dataForm: {
      name: 'zs',
      age: 14,
      gender: '男'
    }
  }
}

// 此时的场景 假如你不知道dataForm里面有几个字段或者字段名你不知道 此时就需要循环表单

<el-form :model="dataForm" label-position="left" inline>
  <el-form-item v-for="(item,index) in Object.keys(dataForm)" :key="index" :label="item">
    <el-input v-model="dataForm[item]"></el-input>
  </el-form-item>
</el-form>

// Object.keys() 返回一个由对象键组成的一个数组因此可以循环 而获取对象属性里有两种方式
// 第一种 dataForm.name 
// 第二种 dataForm['name']
// 而上面v-model为什么不用dataForm.item 哈哈哈这样写就错了 他会解析成第一种的获取对象属性的值固然 dataForm里面是没有item这个键的 所以会报错！！