<template>
<div>
<form @submit.prevent="submitForm">
<label for="username">用户名：</label>
<input v-model="formData.username" type="text" id="username" name="username" />
<label for="password">密码：</label>
<input v-model="formData.password" type="password" id="password" name="password" />
<button type="submit">提交</button>
</form>
<div v-if="formSubmitted">
<p>表单已提交！</p>
<p>用户名: {{ formData.username }}</p>
<p>密码: {{ formData.password }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
password: '',
},
formSubmitted: false,
};
},
methods: {
submitForm() {
// 在这里处理表单提交逻辑，可以发送请求或执行其他操作
// 这里简单地将表单提交状态设置为 true
this.formSubmitted = true;
},
},
};
</script>
上述代码中，我们使用 v-model 指令来实现双向绑定，将表单输入和 Vue 实例的数据进行关联。@submit.prevent 监听表单的提交事件，并调用 submitForm 方法来处理表单提交逻辑。在 submitForm 方法中，你可以执行相应的处理，比如发送请求到服务器。
请注意，这只是一个简单的示例，实际应用中可能需要更复杂的表单验证、状态管理等。Vue 3 支持 Composition API，你也可以考虑使用 setup 函数和 ref、reactive 等新特性来管理表单状态。
转载请注明出处：http://www.zyzy.cn/article/detail/12984/Vue3