Vue3 表单
随着前端技术的发展,Vue.js 已经成为了前端开发中非常流行的框架之一。Vue3 作为 Vue.js 的最新版本,在性能、易用性和灵活性方面都有很大的提升。本文将详细介绍 Vue3 中的表单处理,包括表单的创建、验证、双向绑定等。
1. 表单的创建
在 Vue3 中,我们可以使用v-model指令来实现数据绑定,从而创建表单。以下是一个简单的示例:
<template> <div> <form @submit.prevent="submitForm"> <input v-model="formData.username" type="text" placeholder="用户名"> <input v-model="formData.password" type="password" placeholder="密码"> <button type="submit">登录</button> </form> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const formData = reactive({ username: '', password: '' }); const submitForm = () => { console.log('提交表单:', formData); }; return { formData, submitForm }; } }; </script>在这个例子中,我们使用v-model指令将输入框与formData