Vue表单数据的自动收集
2019-09-29 本文已影响0人
九瀺
<body>
<div id="app">
<form action="/sss" @submit.prevent = "handleSubmit">
<span>用户名：</span>
<input type="text" v-model ="username" >
<span>密码：</span>
<input type="password" v-model = "password">
<span>性别：</span>
<input type="radio" value="男" id="male" v-model = "sex">
<label for="male">男</label>
<input type="radio" value="女" id="famale" v-model = "sex">
<label for="famale">女</label>
<span>爱好：</span>
<input type="checkbox" value="basketball" id="basketball" v-model = "likes">
<label for="basketball">篮球</label>
<input type="checkbox" value="football" id="football" v-model = "likes">
<label for="football">足球</label>
<input type="checkbox" value="pingpang" id="pingpang" v-model = "likes">
<label for="pingpang">乒乓球</label>
<input type="checkbox" value="golf" id="golf" v-model = "likes">
<label for="golf">高尔夫球</label>
<span>城市：</span>
<select v-model="cityId">
<option value="">为选择</option>
<option :value="city.id" v-for= "(city,index) in allcitys " :key="index">{{city.name}}</option>
</select>
<span>签名：</span>
<textarea rows="10" v-model="desc"></textarea>
<input type="submit" value="注册">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
username :"",
password:"",
sex:"男",
likes:["golf"],
allcitys:[{id:1,name:"bj"},{id:2,name:"sh"},{id:3,name:"gd"},{id:4,name:"sx"}],
cityId:'1',
desc:'',
},
methods: {
handleSubmit(){
console.log(this.username,this.password,this.sex,this.likes,this.cityId,this.desc);
}
},
})
</script>
</body>
通过v-model的数据双向绑定，
