表單收集的信息針對有text/textarea，checkbox，radio，select
舉個例子：
<!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: '', info: '' }, methods: { handleSubmit () { console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) alert('提交注冊的ajax請求') } } }) </script> </body> </html>
運行結果：
提示點：
1.參考官方文檔： https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
2.城市選擇時，當選中時，vm.cityId == vm.city.id，依據
3.:key 到底有什么用？按照文檔中的意思是：
一個列表項要有一個key值,這個key值如果唯一且未發生變化,則dom就會被復用,反之則需要重新生成。