Vue表单数据收集
<div id="app">
<form action="/index">
<span>用户名:</span>
<input type="text" v-model="user.username">
<span>密码:</span>
<input type="password" v-model="user.pwd">
<br />
<span>性别:</span>
<input type="radio" id="female" v-model="user.sex" value="女">
<label for="female">女</label>
<input type="radio" id="male" v-model="user.sex" value="男">
<label for="male">男</label>
<br />
<span>爱好:</span>
<input type="checkbox" id="basket" value="basket" v-model="user.likes">
<label for="basket">男球</label>
<input type="checkbox" id="foot" value="foot" v-model="user.likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
<label for="pingpang">乒乓</label>
<br />
<span>城市:</span>
<select v-model="user.cityID">
<option value="">未选择</option>
<option :value="item.id" v-for="(item,index) in citys" :key="item.id">{{item.name}}</option>
</select>
<br />
<span>介绍:</span>
<textarea rows="10" v-model="user.info"></textarea>
<br />
<input type="submit" value="注册" @click.prevent="submit">
</form>
</div>
<script>
Vue.config.devtools = true;
var app = new Vue({
el: "#app",
data: {
user: {
username: "admin",
pwd: '123',
sex: "女",
likes: ['basket'],
cityID: "",
info: ""
},
citys: [
{ id: 1, name: "SZ" },
{ id: 2, name: "BJ" },
{ id: 3, name: "SC" }
]
},
methods: {
submit() {
console.log("发送ajax请求", JSON.stringify(this.user));
}
}
})