【Vue】表单数据的收集

1、input输入框

首先需要创建input输入框，将它们与data配置项中的属性进行双向的数据绑定，这样便可以实现用户在输入框中输入内容，将内容传递到data对应的属性中。

帐号:<input type="text"  v-model.trim="account"><br><br>
密码:<input type="password" v-model:value="psw"><br><br>
年龄:<input type="number" v-model.number="age"><br><br>

<script>
            const vm=new Vue({
                el:'#root',
                data:{
                    account:'',
                    psw:'',
                    age:'',
                }          
            })
</script>

备注：

1. v-model.trim用于清除帐号这一个输入框中前后出现的空格，但是不能清除中间输入的空格
2. 年龄输入框中，type="number"中的number用于将输入的内容转换成数值，例如输入18abc，将收到18；第二个number是Vue中的修饰符，可以将传入的数据进行数据类型转换，转换为数值类型的数据。

实现如下图：

输入相关的内容借助Vue开发者工具查看数据：

2、radio单选框

同样的通过v-model进行数据绑定

性别：
男<input type="radio" name="sex" v-model:value="sex"value="male">
女<input type="radio" name="sex" v-model:value="sex"value="female">
<script>
            const vm=new Vue({
                el:'#root',
                data:{
                   sex:'female',
                },              
            })
</script>

将data中sex的值赋为female则默认选中“女”
需要注意的是，要在radio中加入value值，否则将会显示null

3、checkbox多选框

 爱好：<br><br>
学习<input type="checkbox" v-model:value="hobby" value="study">
打游戏<input type="checkbox" v-model:value="hobby" value="game">
吃饭<input type="checkbox" v-model:value="hobby" value="eat">

<input type="checkbox" v-model="agree">阅读并接受 <a href="#">《用户协议》</a>
<script>
            const vm=new Vue({
                el:'#root',
                data:{
                   hobby:[],
                   agree:'',
                },              
            })
</script>

checkbox多选框需要用数组进行双向绑定，不然返回的值是checked的true或false

勾选的选项则会往对应的数组中添加元素

也可以通过不输入value值来判断是否勾选，勾选返回true，否则返回false

4、option选择框

 所属校区：
 <select v-model:value="city">
                <option value="" >请选择校区</option>
                <option value="beijing" >北京</option>
                <option value="shagnhai" >上海</option>
                <option value="shenzhen" >深圳</option>
                <option value="wuhan" >武汉</option>
</select>
<script>
            const vm=new Vue({
                el:'#root',
                data:{
                   city:'',
                },              
            })
</script>

选择对应的选项，会往对应的属性中赋值

5、textarea多行文本框

<textarea v-model.lazy="other">


</textarea>
 <script>
            const vm=new Vue({
                el:'#root',
                data:{
                   other:'',
                },              
            })
</script>

可以使用.lazy来实现数据的不实时更改，在失去焦点时才会更新对应属性的值

此时焦点还在多行文本框中，输入“其它信息”内容，此时对应的属性值没有发生变化
失去焦点时，发生了数据的更新