VUE参考---收集表单数据
一、总结
一句话总结：
vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端
<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>
二、收集表单数据
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>08_表单输入绑定</title> 6 </head> 7 <body> 8 <!-- 9 1. 使用v-model(双向数据绑定)自动收集数据 10 text/textarea 11 checkbox 12 radio 13 select 14 --> 15 <div id="demo"> 16 <form action="/xxx" @submit.prevent="handleSubmit"> 17 <span>用户名: </span> 18 <input type="text" v-model="username"><br> 19 20 <span>密码: </span> 21 <input type="password" v-model="pwd"><br> 22 23 <span>性别: </span> 24 <input type="radio" id="female" value="女" v-model="sex"> 25 <label for="female">女</label> 26 <input type="radio" id="male" value="男" v-model="sex"> 27 <label for="male">男</label><br> 28 29 <span>爱好: </span> 30 <input type="checkbox" id="basket" value="basket" v-model="likes"> 31 <label for="basket">篮球</label> 32 <input type="checkbox" id="foot" value="foot" v-model="likes"> 33 <label for="foot">足球</label> 34 <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> 35 <label for="pingpang">乒乓</label><br> 36 37 <span>城市: </span> 38 <select v-model="cityId"> 39 <option value="">未选择</option> 40 <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option> 41 </select><br> 42 <span>介绍: </span> 43 <textarea rows="10" v-model="info"></textarea><br><br> 44 45 <input type="submit" value="注册"> 46 </form> 47 </div> 48 49 <script type="text/javascript" src="../js/vue.js"></script> 50 <script type="text/javascript"> 51 new Vue({ 52 el: '#demo', 53 data: { 54 username: '', 55 pwd: '', 56 sex: '男', 57 likes: ['foot'], 58 allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}], 59 cityId: '2', 60 info: '' 61 }, 62 methods: { 63 handleSubmit () { 64 console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) 65 alert('提交注册的ajax请求') 66 } 67 } 68 }) 69 </script> 70 </body> 71 </html>