做前端頁面的時候，經常會遇到form表單，單獨寫一堆input會讓頁面變得難看，這篇文章簡單介紹一下vue中form表單的數據收集。
我們通過代碼畫出以下的表單數樣式：
參考代碼：
<div id="root">
<form >
賬號：<input type="text"> </br> </br>
密碼：<input type="password"> </br> </br>
性別：
男 <input type="radio" name="sex">
女 <input type="radio" name="sex"> </br> </br>
愛好：
唱跳 <input type="checkbox" >
rap <input type="checkbox" >
籃球 <input type="checkbox" >
<br></br>
所屬校區
<select>
<option value="">請選擇校區</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br></br>
其他信息：
<textarea></textarea>
<br></br>
<input type="checkbox"> 閱讀并結束<a href="">《用戶協議》</a>
<br></br>
<button>提交</button>
</form>
</div>1.信息收集
對于普通的input框，通過前面說的v-model就可以收集到想要的數據，比如改成下面這樣：
賬號：<input type="text" v-model='account'> </br> </br>
密碼：<input type="password" v-model="pwd"> </br> </br>
....
new Vue({
el: '#root',
data: {
account:"", //用戶名
pwd:"", //密碼
},
})對于單選框來說，因為v-model綁定的是value，而radio沒有value值，所以不能直接使用上面這種方式獲取值，我們通過綁定value值來獲取單選框的內容，改成下面這樣：
性別：
男 <input type="radio" name="sex" v-model='sex' value="male">
女 <input type="radio" name="sex" v-model='sex' value="female"> </br> </br>對于check復選框，如果單純的通過v-model綁定，那么綁定的值是true或者false，那么，我們也需要給綁定value值，而date里面的收集數據的類型要變成數組形式。參考下面
唱跳 <input type="checkbox" v-model='hobby' value="sing">
rap <input type="checkbox" v-model='hobby' value="rap">
籃球 <input type="checkbox" v-model='hobby' value="Basketball"> new Vue({
el: '#root',
data: {
account:"", //用戶名
pwd:"", //密碼a
sex:'male', //性別
hobby:[], //愛好
},
})其他的信息比較簡單，參考上面即可。
2.表單提交
我們上面收集完了數據，需要整理數據進行前臺驗證或者傳到后臺處理，但是上面定義的信息太散亂，我們考慮把數據定義成對象格式，然后點擊按鈕的時候進行輸出。所有參考代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
賬號：<input type="text" v-model='userInfo.account'> </br> </br>
密碼：<input type="password" v-model="userInfo.pwd"> </br> </br>
性別：
男 <input type="radio" name="sex" v-model='userInfo.sex' value="male">
女 <input type="radio" name="sex" v-model='userInfo.sex' value="female"> </br> </br>
愛好：
唱跳 <input type="checkbox" v-model='userInfo.hobby' value="sing">
rap <input type="checkbox" v-model='userInfo.hobby' value="rap">
籃球 <input type="checkbox" v-model='userInfo.hobby' value="Basketball">
<br></br>
所屬校區
<select v-model="userInfo.city">
<option value="">請選擇校區</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br></br>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea>
<br></br>
<input type="checkbox" v-model="userInfo.agree"> 閱讀并結束<a href="">《用戶協議》</a>
<br></br>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
userInfo:{
account:"", //用戶名
pwd:"", //密碼a
sex:'male', //性別
hobby:[], //愛好
city:"", //所屬城市
other:"", //其他信息
agree:"", //是否同意
}
},
methods:{
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</body>
</html>效果：
3.vue自帶的一些修飾符
v-model.trim //去除開頭結尾空格
v-model.number //保證數據輸入為數字
v-model.lazy //失去焦點再觸發上面這些修飾符主要是用來優化用戶輸入的，當然，如果你目前用的是前端組件，那么這些組件很多自帶這些功能，也可以搭配vue一塊使用。