Vue.js 表单示例:使用双向数据绑定实现简单表单
new Vue({
el: '#app',
data: {
name: '',
email: '',
message: ''
},
methods: {
submitForm: function() {
// 处理表单提交逻辑
console.log('Name: ' + this.name);
console.log('Email: ' + this.email);
console.log('Message: ' + this.message);
}
}
});
在这个例子中,我们使用 Vue.js 的双向数据绑定来绑定表单元素的值。当表单提交时,我们使用 v-on 指令来阻止默认的提交行为,并调用 submitForm 方法来处理表单提交逻辑。在这个方法中,我们可以访问表单元素的值,并执行任何必要的操作,例如发送 AJAX 请求或显示成功/失败消息。
注意:这个示例只是一个基础的表单,你需要根据实际需求添加更多的表单元素和验证逻辑。
原文地址: https://www.cveoy.top/t/topic/mXdK 著作权归作者所有。请勿转载和采集!