VUE中关于表单提交的简单实现

Posted var-chu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE中关于表单提交的简单实现相关的知识,希望对你有一定的参考价值。

main.js

import Vue from "../vue.js";
import App from "./App.js";
//启动
new Vue({
    el:"#app",
    render:c=>c(App),
});

App.js

export default {
data(){
return {
formObj:{
nickname:"",
sex:"",
book:"",
sleep:"",
city:"",
}
};
},
methods:{
showData(e){
console.log(e);
console.log(this.formObj);
}
},
//在组件创建后 处理下数据 实现 下拉框的默认选中
created(){
this.formObj.city="sz";
},
template:`
<form @submit.prevent="showData">
<!-- 给表单注册提交事件 .prevent 就实现了阻止表单的默认提交 -->
昵称:
<input type="text" v-model="formObj.nickname">
性别:
<!-- v-model是同一个名称就会互斥 需要value属性 -->
<input type="radio" v-model="formObj.sex" value="male"> 男
<input type="radio" v-model="formObj.sex" value="famale"> 女
爱好:
<input type="checked" v-model="formObj.book"/> 看书
<input type="checked" v-model="formObj.sleep"/> 睡觉
地址:
<select v-model="formObj.city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<input type="submit" value="提交">
</form>
`,

}

 

以上是关于VUE中关于表单提交的简单实现的主要内容,如果未能解决你的问题,请参考以下文章

简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页

vue项目中关于axios的简单使用

Unity中关于AnimationEvent.Time的问题

vue表单校验

如何在Vue中提交表单,重定向到新路由并传递参数?

应用程序在主要活动中关闭onBackPressed