el-form 绑定数据什么时候用v-modle什么时候用:model

`v-model` 是 `Vue.js` 提供的指令，用来在表单元素和组件上创建双向数据绑定。在使用 `v-model` 绑定表单元素时，会自动监听输入事件或选择事件，并将输入的值同步到 `Vue.js` 实例中的数据属性中。因此，当你需要双向绑定表单输入值时，你可以使用 `v-model`。

在 `Element-UI` 的 `el-form` 中，可以使用 `v-model` 绑定整个表单的数据，如下所示：

<template>
  <el-form v-model="formData" :rules="rules" ref="form">
    <!--其他表单元素-->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: { //表单数据对象
        name: '',
        age: '',
        email: ''
      },
      rules: { //表单验证规则对象
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  }
}
</script>

在这个例子中，我们将整个表单数据对象 `formData` 绑定到 `el-form` 的 `v-model` 上，实现了表单数据的双向绑定。

而 `:model` 是 `Element-UI` 提供的属性，用来绑定一组表单数据。在使用 `:model` 绑定表单元素时，需要同时指定该表单元素的 `prop` 属性和 `event` 属性。其中，`prop` 属性指定了表单元素对应的数据属性名，`event` 属性指定了表单元素的输入事件或选择事件。

在 `Element-UI` 的 `el-form` 中，如果你需要手动绑定表单元素的值和表单数据对象的属性，你可以使用 `:model` 属性，如下所示：

<template>
  <el-form :model="formData" :rules="rules" ref="form">
    <el-form-item label="姓名" prop="name">
      <el-input :value="formData.name" @input="formData.name = $event" clearable></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input :value="formData.age" @input="formData.age = $event" clearable></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input :value="formData.email" @input="formData.email = $event" clearable></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: { //表单数据对象
        name: '',
        age: '',
        email: ''
      },
      rules: { //表单验证规则对象
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  }
}
</script>

在这个例子中，我们使用 `:model` 绑定了表单元素和表单数据对象的属性，并且手动监听表单元素的输入事件，将输入的值赋值给表单数据对象的属性。需要注意的是，在使用 `:model` 绑定表单数据时，需要在表单元素上同时指定 `prop` 属性和 `event` 属性。