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>

`,

}