Vue.js入门系列(9)--表单操作2

没错，你没看错，今天小编又为大家分享在Vue中有关表单的操作，上次主要为大家分享了v-model在text、textarea、checked、radio中的应用以及v-model的本质实际上是v-bind和v-on:input事件两个指令的结合。下面进一步为大家分享v-model在表单的操作

一、v-model 在select 中的应用

好多选框 checkbox类似，v-model在select中的应用也可以分为两类

1. 单选

<form action="" class="warp" >
    <select v-model="subject">
        <option value ="语文">语文</option>
        <option value ="数学">数学</option>
        <option value ="英语">英语</option>
        <option value ="化学">化学</option>
    </select>
    <p>你喜欢的科目是:{{subject}}</p>
</form>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                subject:''
            },
    })
</script>

单选.gif

在这个例子中，当用户点击语文，就会将语文传递到model中的subject变量，从而实现页面到model的双向绑定。
要注意两点：
第一点：v-model 要绑定在select中而不是option，option是作为select的选项，因为传递的数据是下拉框的内容而不是下拉框的选项，所以要将v-model绑定在select中
第二点：保存的值是一个字符串

2.多选

<form action="" class="warp" >
    <select v-model="subject" multiple>
        <option value ="语文">语文</option>
        <option value ="数学">数学</option>
        <option value ="英语">英语</option>
        <option value ="化学">化学</option>
    </select>
    <p>你喜欢的科目是:{{subject}}</p>
</form>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                subject:[]
            },
    })
</script>

多选.gif

在这个例子中，用户按下Ctrl 键后可以进行多选
这里同样要注意两点：
第一点：保存的值是数组，而不是简单的字符串。因为用户进行的是多选，提交到后台的数据应该是用户所选定的所有数据
第二点：增加multiple。如果没有增加multiple无法实现同时选择多个的功能。
结合上面两大点进行一个总结：
① v-model绑定的位置：v-model绑定的位置在select而不是option
② 保存值的类型：如果是单选，变量的类型是简单的字符串；如果是多选，变量的类型是数组
③ 实现多选的关键： 增加 multiple

二、值绑定

相信很多读者跟小编一样，很困惑什么是值绑定，简单的说，就是动态的书写value的值。

<form action="" class="warp" >
    <select v-model="subject" multiple>
        <option value ="语文">语文</option>
        <option value ="数学">数学</option>
        <option value ="英语">英语</option>
        <option value ="化学">化学</option>
    </select>
    <p>你喜欢的科目是:{{subject}}</p>
</form>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                subject:[]
            },
    })
</script>

比如在这段代码中，我们是直接将value的值写成语文，数学，英语写死了，在正常的开发中，这些值应该从后台发送过来的数据获取，所以我们就需要根据后台发送过来的数据动态的追加这些value值。具体的用法如下：

首先，对原始数据的处理：

1.存放：在Vue实例的data中声明一个数组，用来存原始数据
2.取数：使用for 循环逐一遍历原始数组中的每个元素，并赋值给value

其次，和用户交互的数据

1.存放：在Vue实例的data中声明一个数组，用来存用户操作过的数据
2.显示：通过v-model达到双向绑定，将用户操作的数据显示在页面中
代码如下：

<form action="" class="warp" >
    <label for="" v-for="item in originSubject">
        <input type="checkbox" v-bind:value='item' v-model="newSubject">{{item}}
    </label>
    <p>你喜欢的科目是:{{newSubject}}</p> 
</form>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                originSubject:['语文','数学','英语','历史'],
                newSubject:[]
            },
    })
</script>

值绑定.gif

在这个例子中，首先在data声明数组originSubject用来存放原始的数据，然后在label标签使用for循环遍历在originSubject数组中的数据并将数据传递到input的value值中，这是原始数据的操作；其次也在data中声明的newSubject用来存放用户操作过的数据，通过在input标签中使用v-model将用户操作过的数据显示在页面中，这是用户操作过的数据的处理。
以上就是关于值绑定的小分享，说白了其实就是通过for循环来修改input中的value值

三、修饰符

在事件监听的时候小编也为大家分享过一些时间有关的修饰符，这里的修饰符主要针对表单元素的修饰符，主要有三种：lazy、number、trim

1.lazy

① lazy出现的原因： v-model在事项双向数据绑定的时候会出现一个问题：一旦有数据发生改变，对应的data中的数据也会发生变化，修改的太频繁，比如：用户输入了6个a，每输入一个a都要重新修改message的值，而现实中我们只希望当用户输入完成的时候才修改相应的值，这个时候就出现了lazy修饰符

更新太频繁.gif

② 定义：让数据在失去焦点或者回车时才更新数据

<input type="text" v-model.lazy="message">
<p>{{message}}</p>

lazy.gif

由图可知，当输入框失去焦点时才将数据修改到data中

2.number

① number 出现的原因：使用v-model传递的数据，不管输入的值字母还是数字，默认都是字符串类型，可以通过下面的例子进行理解：

<input type="text" v-model="age">
<p>年龄：{{age}}-{{typeof age}}</p>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                age:''
            },
    })
</script>

string类型.gif

会发现即使输入的是数字，类型依旧是字符串类型。也有读者可能会问，是不是因为一开始就在data中定义了age为字符串类型，所以才会显示字符串类型，那么小编将age定义为number类型后：

<input type="text" v-model="age">
<p>年龄：{{age}}-{{typeof age}}</p>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                age:0
            },
    })
</script>

定义为number类型.gif

可以看到，即使一开始将数据定义为number，但是经过v-model的双向绑定后依旧转换成了string类型，这就是在使用v-model时可能会出现的类型转换问题，如果想要输入的数字是number类型，可以通过.number修饰符
② 定义：将输入框内的内容转换成number类型

<input type="text" v-model.number="age">
<p>年龄：{{age}}-{{typeof age}}</p>
<script>
    var vm  = new Vue ({
        el:".warp",
        data:{
                age:0
            },
    })
</script>

转换成number类型.gif

在经过number修饰符的处理后，成功的将数字转换成了number类型

3.trim

① trim出现的原因：用户可能会在数据的首尾输入很多的空格，这个时候我们希望将空格去除，比如：

<input type="text" v-model="message">
<p>您输入的信息是:{{message}}</p>

image.png

因为浏览器有空白折叠现象，不管输入多少个空格，都只能识别一个，所以我们通过下面的控制台来查看效果：