day66 -收集表单数据

收集表单数据

 <body>
 <!--
   收集表单数据：
     若<input type="text"  则v-model收集的是value值，用户输入的就是value
     若<input type="radio"  则v-model收集的是value值，且要给标签配置value值
     若<input type="checkbox"
       1.没有配置input的value属性，手机的是checked 勾选为true未勾选是false
       2.配置value属性：
         1.v-model的初始值是非数组，收集的是checked 勾选为true未勾选是false
         2.v-model的初始值是数组，收集的是value组成的数组
      v-model修饰符：
        lazy：失去焦点再收集数据
        number：输入字符串转换为有效的数字
        trim：输入首位空格过滤
 -->
 <div id="root">
   <form @submit.prevent="sub">
     <label for="demo">账号：</label>
     <input type="text" id="demo" v-model.trim="userinfo.account">
     <br>
     <label for="pwd">密码：</label>
     <input type="password" id="pwd" v-model="userinfo.password">
     <br>
     性别：
     男<input type="radio" name="sex" value="male" v-model="userinfo.sex">
     女<input type="radio" name="sex" value="female" v-model="userinfo.sex">
     <br>
     爱好：
     学习<input type="checkbox" v-model="userinfo.hobby" value="study">
     打游戏<input type="checkbox" v-model="userinfo.hobby" value="game">
     吃饭<input type="checkbox" v-model="userinfo.hobby" value="eat">
     <br>
     所属校区：
     <select v-model="userinfo.city">
       <option value="">请选择校区</option>
       <option value="bei">北校区</option>
       <option value="nan">南校区</option>
       <option value="xin">新校区</option>
     </select>
     <br>
     其他信息：
     <textarea v-model.lazy="userinfo.other">
 
     </textarea>
     <br>
     <input type="checkbox" v-model="userinfo.agree">
     阅读并接受<a href="http://www.bilibili.com">《用户协议》</a>
     <br>
     <button>提交</button>
   </form>
 
 </div>
 
 </body>
 <script>
   Vue.config.productionTip = false
 
   new Vue({
     el:'#root',
     data:{
       userinfo:{
         account:'',
         password:'',
         sex:'female' ,//默认选择女
         hobby:[],
         city:'',
         other:'',
         agree:''
       }
       },
     methods:{
       sub(){
         console.log(JSON.stringify(this.userinfo))
       }
     }
   })
 
 
 </script>