vue入门之表单数据收集

说明：

记录vue在使用表单收集数据出现的一些常见问题 ！！！

 038_尚硅谷Vue技术_收集表单数据_哔哩哔哩_bilibili

<form @submit.prevent='demo'>

   <!--使用label标签当点击文字时，光标会锁定在文本框中->
<label for='account'>账号</label>  
<input type=text name=account v-model.trim='account'  value = ''/><br>


<label for='password'>密码</label>
<input type=password name=password  v-model='password' value =''/><br>


<label for='age'>年龄</label>
<input type=number name=age  v-model.number='age' value =''/><br>

<label>性别</label>
男: <input type=radio name=sex  v-model='sex' value ='male'/>
女：<input type=radio name=sex  v-model='sex' value ='fmale'/><br>


<label for='hobby'>爱好</label>
<input type=checkbox name=hobby  v-model='hobby'  value='search'/> 搜索
<input type=checkbox name=hobby  v-model='hobby'  value ='game'/> 游戏
<input type=checkbox name=hobby  v-model='hobby'  value ='sang'/> 唱歌


<select  v-model='address'>
     <option value=0>选择地区</option>
     <option value=1>北京</option>
     <option value=2>上海</option>
     <option value=3>天津</option>
</select>



<label for='other'>其他</label>
<textarea type=text name=area v-model='area' value></textarea><br>

<input type=checkbox name=agree v-model='agree'>
<a href='www.baidu.com'>协议地址</a>

<button @submit.prevent= 'saveInfo'>提交</button>

</form>





const vm = new Vue({
      data:{
         account:'',
         password:'',
         age:'',
         sex:'',
         hobby:[],
         address:'',
         area:''
         agree:''
        },
     methods:{
         saveInfo(){
              ###业务逻辑处理
              console.log(JSON.toStringfy(this._data))
           }
      }
})

表单中使用v-model绑定常见的问题

 v-model绑定文本框注意

1) 文本框必须要设定value属性

2)文本框类型是text是如果要去除空格使用v-model.trim

3)文本框类型是number时控制双向绑定也为数字 v-model.number

v-model绑定单选按钮时注意

1)单选框要必须设定value属性，如果不设定则收集的是check的值

2）按钮的初始化值设定可以使用原生的check=checked控制，也可以在vue实例中初始设定

v-model绑定复选框需要注意：

1)复选框必须要设定value属性

2)复选框多选项初始值的设定，会影响操作，如果初始值设定成字符串，则v-model也不会收集响应的value值。

因此使用v-model绑定复选框多选项时，vue实例中属性定义为数组。

使用v-model绑定复选框单选项时，vue实例中属性定义为字符串。

v-model绑定下拉框需要注意：

1)下拉框option必须要设定value属性

2)默认值的设定可以通过原生select=selected或者vue实例中设定初始值

v-model绑定多行文本框需要注意：

1)多行文本框不需要设定value值

v-model绑定单项复选框需要注意：

 1）因为只有一个复选框，只需要判断是否勾选即可，因此不需要设定value属性

2)可以通过v-model.lazy来控制是在失去焦点时才收集文本内容

点击按钮需要注意

1）点击按钮，会导致表单提交然后跳转页面，导致表单数据丢失

2）阻止表单提交跳转页面的默认行为 @submit.prevent='回调函数'