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>