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>
`,
}
