VUE课程---21、表单输入绑定
一、总结
一句话总结：
vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端
<div id="app"> <form action="" @submit.prevent="handleSubmit"> <div> <label for="">用户名</label> <input type="text" v-model="username"> </div> <div> <label for="">密码</label> <input type="password" v-model="password"> </div> <div> <label for="">性别</label> <input type="radio" value="male" v-model="sex">男 <input type="radio" value="female" v-model="sex">女 </div> <div> <label for="">爱好</label> <input type="checkbox" value="football" v-model="hobby">足球 <input type="checkbox" value="basketball" v-model="hobby">篮球 <input type="checkbox" value="game" v-model="hobby">游戏 <input type="checkbox" value="read" v-model="hobby">看书 </div> <div> <label for="">城市</label> <select name="" id="" v-model="cityId"> <option value="0">未选择</option> <option v-for="item in cities" :value="item.id">{{item.name}}</option> </select> </div> <div> <label for="">描述</label> <textarea cols="30" rows="3" v-model="description"></textarea> </div> <div> <input type="submit" value="提交"> </div> </form> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { username:'', password:'', sex:'female',//设置默认值，设置的值和value里的一样 hobby:['game','read'],//数组 cities:[ {id:'1',name:'新疆'}, {id:'2',name:'西藏'}, {id:'3',name:'内蒙古'}, {id:'4',name:'黑龙江'}, ], cityId:0, description:'' }, methods:{ handleSubmit:function () { console.log('handleSubmit'); } } }); </script>
1、vue做表单数据绑定的时候如何设置checkbox和radio的默认值？
在vue的实例中指定默认值，指定的值就是我们想要选中的input中的value，比如hobby默认值：hobby:['game','read'],
<div> <label for="">性别</label> <input type="radio" value="male" v-model="sex">男 <input type="radio" value="female" v-model="sex">女 </div> <div> <label for="">爱好</label> <input type="checkbox" value="football" v-model="hobby">足球 <input type="checkbox" value="basketball" v-model="hobby">篮球 <input type="checkbox" value="game" v-model="hobby">游戏 <input type="checkbox" value="read" v-model="hobby">看书 </div> sex:'female',//设置默认值，设置的值和value里的一样 hobby:['game','read'],//数组
2、下拉列表select做双向绑定的时候，绑定是在select上还是在select的option上？
在select上，例如<select v-model="cityId"></select>
<div> <label for="">城市</label> <select name="" id="" v-model="cityId"> <option value="0">未选择</option> <option v-for="item in cities" :value="item.id">{{item.name}}</option> </select> </div> cities:[ {id:'1',name:'新疆'}, {id:'2',name:'西藏'}, {id:'3',name:'内蒙古'}, {id:'4',name:'黑龙江'}, ], cityId:0,
二、表单输入绑定
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单输入绑定</title> 6 <style> 7 div{ 8 margin-bottom: 10px; 9 } 10 </style> 11 </head> 12 <body> 13 <!-- 14 vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端 15 16 vue做表单数据绑定的时候如何设置checkbox和radio的默认值 17 在vue的实例中指定默认值，指定的值就是我们想要选中的input中的value 18 19 下拉列表select做双向绑定的时候，绑定是在select上还是在select的option上 20 在select上，例如<select v-model="cityId"></select> 21 22 --> 23 <div id="app"> 24 <form action="" @submit.prevent="handleSubmit"> 25 <div> 26 <label for="">用户名</label> 27 <input type="text" v-model="username"> 28 </div> 29 30 <div> 31 <label for="">密码</label> 32 <input type="password" v-model="password"> 33 </div> 34 <div> 35 <label for="">性别</label> 36 <input type="radio" value="male" v-model="sex">男 37 <input type="radio" value="female" v-model="sex">女 38 </div> 39 <div> 40 <label for="">爱好</label> 41 <input type="checkbox" value="football" v-model="hobby">足球 42 <input type="checkbox" value="basketball" v-model="hobby">篮球 43 <input type="checkbox" value="game" v-model="hobby">游戏 44 <input type="checkbox" value="read" v-model="hobby">看书 45 </div> 46 <div> 47 <label for="">城市</label> 48 <select name="" id="" v-model="cityId"> 49 <option value="0">未选择</option> 50 <option v-for="item in cities" :value="item.id">{{item.name}}</option> 51 </select> 52 </div> 53 <div> 54 <label for="">描述</label> 55 <textarea cols="30" rows="3" v-model="description"></textarea> 56 </div> 57 <div> 58 <input type="submit" value="提交"> 59 </div> 60 </form> 61 62 </div> 63 <script src="../js/vue.js"></script> 64 <script> 65 let vm = new Vue({ 66 el: '#app', 67 data: { 68 username:'', 69 password:'', 70 sex:'female',//设置默认值，设置的值和value里的一样 71 hobby:['game','read'],//数组 72 cities:[ 73 {id:'1',name:'新疆'}, 74 {id:'2',name:'西藏'}, 75 {id:'3',name:'内蒙古'}, 76 {id:'4',name:'黑龙江'}, 77 ], 78 cityId:0, 79 description:'' 80 }, 81 methods:{ 82 handleSubmit:function () { 83 console.log('handleSubmit'); 84 } 85 } 86 }); 87 </script> 88 </body> 89 </html>
