vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】

<template>
  <a-form :model="formState" name="basic" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="Username" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="Password" name="password">
      <a-input v-model:value="formState.password" type="password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
 
<script setup>
import { reactive } from 'vue';
import { Form, Input, Button } from 'ant-design-vue';
 
const formState = reactive({
  username: '',
  password: ''
});
 
const onFinish = (values) => {
  console.log('Submit:', values);
};
 
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
</script>

这个代码实例展示了如何在Vue 3项目中使用Ant Design Vue库的<a-form>和<a-form-item>组件以及<a-input>组件进行表单的定义和数据绑定。同时，它演示了如何使用v-model来创建双向数据绑定，以及如何处理表单的提交事件。这是一个简洁且有效的表单处理实例。