VUE表单数据的自动收集
2018-06-25 本文已影响17人
陈老板_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<form action="" @submit.prevent="handleSubmit">
<span>用户名</span>
<input type="text" v-model="username"><br>
<span>密码</span>
<input type="password" v-model="pwd"><br>
<span>性别</span>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label><br>
<span>爱好</span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">篮球</label>
<input type="checkbox" id="football" value="football" v-model="likes">
<label for="football">足球</label>
<input type="checkbox" id="wangqiu" value="wangqiu" v-model="likes">
<label for="wangqiu">网球</label><br>
<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>
<input type="submit">
</form>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
username:'',
pwd:'',
sex:'女',
likes:['football'],
allCitys:[{id: 1,name:'beijing'},{id: 2,name:'tangshan'},{id: 3,name:'xixixi'}],
cityId:'3'
},
methods:{
handleSubmit(){
console.log(this.username,this.pwd);
}
}
})
</script>
</html>
