9. 表單輸入繫結
阿新 • • 發佈:2020-08-16
使用 v-model 對錶單資料自動收集
- text/textarea
- checkbox
- radio
- select
編碼
<div id="demo"> <form @submit.prevent="handleSubmit"> <span>使用者名稱: </span> <input type="text" v-model="user.username"><br> <span>密碼: </span> <input type="password" v-model="user.pwd"><br> <span>性別: </span> <input type="radio" id="female" value="female" v-model="user.sex"> <label for="female">女</label> <input type="radio" id="male" value="male" v-model="user.sex"> <label for="male">男</label><br> <span>愛好: </span> <input type="checkbox" id="basket" value="basketball" v-model="user.likes"> <label for="basket">籃球</label> <input type="checkbox" id="foot" value="football" 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 v-for="city in allCitys" :value="city.id"> {{ city.name }} </option> </select><br> <span>介紹: </span> <textarea v-model="user.desc" rows="10"></textarea><br><br> <input type="submit" value="註冊"> </form> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#demo', data: { user: { username: '', pwd: '', sex: 'female', likes: [], cityId: '', desc: '', }, allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SZ'},{id: 4, name: 'SH'}], }, methods: { handleSubmit (event) { alert(JSON.stringify(this.user)) } } }) </script>