vue指令v-model(雙向資料繫結)自動收集資料
前言：表單提交資料在網站頁面中是十分常見的，而這個表單資料的獲取在原生寫法甚至於JQ都是比較麻煩的（首先需要獲取DOM，然後獲取值）。
但是，在vue的專案環境下，表單資料的收集又該怎麼辦呢？（這種自己寫input元素的方法在實際專案中是不常用的哈，因為一般我們都會用一個UI庫，方便而快捷！）
首先，看一下最後的效果：
然後，上一下完整的程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_表單輸入繫結</title> </head> <body> <div id="demo"> <form action="/xxx" @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="foot" value="foot" v-model="likes"> <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label for="pingpang">乒乓</label><br> <span>城市: </span> <select v-model="cityId"> <option value="">未選擇</option> <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option> </select><br> <span>介紹: </span> <textarea rows="10" v-model="info"></textarea><br><br> <input type="submit" value="註冊"> </form> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { username: '', pwd: '', sex: '男', likes: ['foot'], allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}], cityId: '2', info: '' }, methods: { handleSubmit () { console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) alert('提交註冊的ajax請求') } } }) </script> </body> </html>
v-model自動收集資料使用總結：
1. 在input標籤中使用 v-model 指令後，input的value屬性將自動和v-model的值想繫結（簡單來說：v-model繫結的是input的value屬性）
2. 在繫結type為radio和checkbox 的input標籤的時候，也必須給這兩種型別的input新增value屬性
3. type為radio的input（單選框），必須一組單選框v-model的值的相同的，而最後的值是選擇的單選框對應的value值
4. type為checkbox的input（複選框），必須一組複選框v-model的值的相同的，而最後的值是選擇的複選框對應的value值（陣列）
5. select（下拉框）中使用 v-model 時（ v-model 是使用在select標籤上，即父級標籤上），需要在其子標籤 option 中設定value值（一般option都是遍歷一個數組而產生）。而最後的值是被選中的option（子標籤）對應的 value 值。（一般是option對應的id）
6. .prevent : 阻止事件的預設行為 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！