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