zoukankan      html  css  js  c++  java
  • VUE实例课程---2、收集表单数据

    VUE实例课程---2、收集表单数据

    一、总结

    一句话总结:

    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>

     
  • 相关阅读:
    HDU4474 Yet Another Multiple Problem BFS搜索
    HDU4473 Exam 数学分析
    2013ACM多校联合(4)
    POJ1273 网络流...
    HDU4472 Count 递推
    POJ1149 PIGS 网络流
    UVA10881 Piotr's Ants 想法题
    javascript js string.Format()收集
    修改 设置 vs.net 网站 调试 设为 起始页
    【转】HTML5杂谈 概念与现行游戏 割绳子 宝石迷阵
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12737884.html
Copyright © 2011-2022 走看看