【Vue笔记】 收集表单数据

 简单表单利用Vue收集数据

<div id="root">
    <form @submit.prevent="demo">
       账号： <input type="text"  v-model.trim="account"> <br/><br/>   //trim可以省略空格
       密码： <input type="password"  v-model="password"> <br/><br/>
       年龄： <input type="number"  v-model.number="age"> <br/><br/>
       性别：
       男：<input type="radio"  name="sex"  v-model="sex" value="male"> 
       女：<input type="radio"  name="sex" v-model="sex" value="female">  <br/><br/>
       爱好：
       学习<input type="checkbox" v-model="hobby" value="study"> 
       打游戏<input type="checkbox" v-model="hobby" value="game"> 
       吃饭<input type="checkbox" v-model="hobby" value="eat"> <br/><br/>
       所属校区
       <select v-model="school" >
         <option value="">请选择校区</option>
         <option value="">西湖校区</option>
         <option value="">西溪校区</option>
         <option value="">下沙校区</option>
       </select>
       <br/><br/>
       其他信息：
       <textarea v-model.lazy="other" ></textarea>  //lazy输入完才收集
       <input type="checkbox" v-model="agree"> 阅读并接受<a href="">《用户协议》</a>
       <button>提交</button>
</form>
</div>


<script  type="text/javascript">
      Vue.config.productionTip=false
      new Vue({
         el:'#root',
         data:{
            account:'',
            password:'',
            age:'',
            sex:'female',
            hobby:[],  //需要数组，不能用字符串
            school:'',
            other:'',
            agree:''
         },
         methods:{
            demo(){
              console.log(JSON.stringify(this._data))
          }
         }
})

</script>

收集表单数据总结：

   若<input type="text"/>，则v-model收集的是value值，用户输入的值就是value值

   若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值

   若<input type="checkbox"/>

        1、没有配置input的value属性，那么收集的就是checked（勾选或者未勾线，是布尔值）

        2、配置input的value属性：

           （1）v-model的初始值是非数组，那么收集的就是checked（勾选或者未勾线，是布尔值）

           （2）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

         lazy：失去焦点再收集数据

         number：输入字符串转为有效的数字

         trim：输入首尾空格过滤