a-form-item和a-form-model

`a-form-item` 和 `a-form-model` 都是 Ant Design Vue 组件库中的表单组件，用于处理表单数据。它们的作用有所不同：

- `a-form-item`：用于包装表单项，可以设置表单项的 label 和校验规则等属性。
- `a-form-model`：用于绑定表单数据，将表单数据与组件的数据模型进行双向绑定。

使用 `a-form-item` 包装表单项可以方便地设置表单项的属性，如下示例：

<template>
  <a-form>
    <a-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
      <a-input v-model="username" />
    </a-form-item>
    <a-form-item label="密码" :rules="[{ required: true, message: '请输入密码' }]">
      <a-input type="password" v-model="password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    submit() {
      // 提交表单数据
    },
  },
};
</script>

使用 `a-form-model` 绑定表单数据可以方便地处理表单数据的变化，如下示例：

<template>
  <a-form :model="form" :rules="rules" ref="form">
    <a-form-item label="用户名" prop="username">
      <a-input v-model="form.username" />
    </a-form-item>
    <a-form-item label="密码" prop="password">
      <a-input type="password" v-model="form.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名' }],
        password: [{ required: true, message: '请输入密码' }],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单数据
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

在以上示例中，`a-form-model` 绑定了表单的数据模型 `form` 和校验规则 `rules`，在提交表单时通过 `validate` 方法对表单进行校验，最后提交表单数据。