基本用法：
<template>
<van-form>
<van-field v-model="username" label="用户名" placeholder="请输入用户名" />
<van-field v-model="password" label="密码" type="password" placeholder="请输入密码" />
<van-checkbox v-model="agree" label="同意用户协议" />
<van-button type="info" @click="submitForm">提交</van-button>
</van-form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
agree: false
};
},
methods: {
submitForm() {
// 在这里处理表单提交逻辑
console.log('用户名:', this.username);
console.log('密码:', this.password);
console.log('是否同意用户协议:', this.agree);
}
}
};
</script>
在上述代码中，通过使用 van-form 包裹多个 van-field 和 van-checkbox，你可以创建一个简单的表单。通过 v-model 双向绑定的方式，你可以获取用户在输入框和复选框中输入的内容。
表单验证：
<template>
<van-form ref="form" @submit="onSubmit">
<van-field
v-model="username"
label="用户名"
placeholder="请输入用户名"
:rules="[{ required: true, message: '请输入用户名' }]"
/>
<van-field
v-model="password"
label="密码"
type="password"
placeholder="请输入密码"
:rules="[{ required: true, message: '请输入密码' }]"
/>
<van-button type="info" native-type="submit">提交</van-button>
</van-form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过，在这里处理表单提交逻辑
console.log('用户名:', this.username);
console.log('密码:', this.password);
} else {
// 表单验证不通过，可以进行相应的提示
console.log('表单验证不通过');
}
});
}
}
};
</script>
通过设置 rules 属性，你可以进行表单验证。在 van-form 上监听 submit 事件，然后通过 validate 方法进行表单验证。
以上是一些 Vant3 Form 表单组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Form 表单文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/form)。
转载请注明出处：http://www.zyzy.cn/article/detail/5722/Vant