Vue.js按键修饰符及v-model修饰符

左手的ㄟ右手 2024-03-22 10:49 17阅读 0赞

![9bf80c7e10d74e3d8ac3994208f9cba8.gif][]

**目录**

一、按键修饰符

（1）回车键按键修饰符示例

（2）自定义按键修饰符示例

二、v-model修饰符

（1）.lazy

（2）.number

（3）.trim

--------------------

## 一、按键修饰符 ##

> v-on指令用来进行事件监听（如单击事件、键盘事件等）

v-on监听键盘事件的基本使用示例：

<div id="root">
            <input type="text" v-on:keyup="counter+=1">
            <p>在输入框输入了{
       {counter}}个字符</p>
        </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    counter: 0
                },
                methods: {
    
                }
            })
        </script>

执行结果：

![e041be6b4af74e9aa675425fd1c8cb13.png][]

> 在监听键盘事件时，经常需要检查详细的按键。Vue.js允许为v-on在监听键盘事件时添加按键修饰符。例如：

<input v-on:keyup.enter="submit()">
    
    <input @keyup.enter="submit">

> 下面列出官方提供的所有按键修饰符别名：

.enter => //enter键
    .tab => //tab键
    .delete (捕获"删除"和"退格"按键) => //删除键
    .esc => //取消键
    .space => //空格键
    .up => //上
    .down => //下
    .left => //左
    .right => //右

### （1）回车键按键修饰符示例 ###

<div id="root">
            <input type="text" v-model="content" v-on:keyup.enter="fun(content)">
        </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    content: ''
                },
                methods: {
                    fun:function(data){
                        alert('录入内容为：'+data);
                        this.content='';
                    }
    
                }
            })
        </script>

执行结果：

![1ea3b9f533154b0887c10c1e1ea59aae.png][]

在input框中输入"夏志121"后按下回车键，松开回车键后在浏览器中将弹出对话框"录入内容为：夏志121"。

### （2）自定义按键修饰符示例 ###

Vue.js还支持自定义按键修饰符，可以利用按键对应的键码来实现，可以把上面的功能改成松开F2后弹出输入的内容，而F2对应的键码是113，那么久可以对代码进入如下修改：

<div id="root">
            <input type="text" v-model="content" v-on:keyup.113="fun(content)">
        </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    content: ''
                },
                methods: {
                    fun:function(data){
                        alert('录入内容为：'+data);
                        this.content='';
                    }
    
                }
            })
        </script>

执行结果：

![0a0fad3423d741d4aff29c8c9a0efb4e.png][]

在input框中输入"你好"后按下F2，松开F2后在浏览器中将弹出"录入内容为：你好"。

## 二、v-model修饰符 ##

v-model可以实现表单元素和数据的双向绑定。与事件修饰符类似，v-model指令也有修饰符，用于控制数据同步的机制。

### （1）.lazy ###

v-model默认是在input事件中同步输入框中的内容的，即一旦有数据发生改变，对应data中的数据就会自动发生改变。若使用lazy修饰符，可以让**数据在失去焦点或回车**时会**更新。**

v-model的lazy修饰符使用示例：

<div id="root">
            <input v-model.lazy="content">
            <div>{
       {content}}</div>
    
        </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    content:"这是content"
                },
                methods: {
    
                }
            })
        </script>

执行结果：

![e3d27569bc19456fbb9c2f94bea32b0f.png][]

### （2）.number ###

**默认**情况下，在输入框中输入的内容会被当作字符串类型进行处理，这是**HTML的底层逻辑造成**的，如果加上number修饰符，就可以让你在输入数字的时候将输入的内容转换成number类型。

v-model的number修饰符使用示例：

<div id="root"><br><br>
            <input v-model="content1">
            <div>【不加number修饰符】输入内容：{
       {content1}}</div>
            <div>【不加number修饰符】数据类型：{
       {typeof content1}}</div>
            <input v-model.number="content2">
            <div>【不加number修饰符】输入内容：{
       {content2}}</div>
            <div>【不加number修饰符】数据类型：{
       {typeof content2}}</div>
        </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    content1:"这是content1",
                    content2:"这是content2"
                },
                methods: {
    
                }
            })
        </script>

执行结果：

分别在第一个输入框和第二个输入框中输入"121"，在浏览器生成的内容如下：

![506eca53b91247bd98c3af847c2da173.png][]

### （3）.trim ###

trim修饰符可以去除输入内容左右两边的空格。

v-model的trim修饰符使用示例：

<div id="root">
            <input v-model.trim="content">
            <div>输入内容：{
       {content}}</div>
    
        </div>
        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    content:"content"
                },
                methods: {
    
                }
            })
        </script>

执行结果：

![dd678f078ba24b17a2b3e968c6a63f2c.png][]

[9bf80c7e10d74e3d8ac3994208f9cba8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e956caebde2f4efa8257352cfabd6ba1.png
[e041be6b4af74e9aa675425fd1c8cb13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4ecd206e98814cd7b8af2b78f15b4d1e.png
[1ea3b9f533154b0887c10c1e1ea59aae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3b65bd06f3d84f298827535ede58218d.png
[0a0fad3423d741d4aff29c8c9a0efb4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/37ac7151a13b419caffc297b3d656754.png
[e3d27569bc19456fbb9c2f94bea32b0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c3316f6c8538411c89b456b9e1e748d9.png
[506eca53b91247bd98c3af847c2da173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/dbf2a31a09ed485ba5853b1e2f32c418.png
[dd678f078ba24b17a2b3e968c6a63f2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ae99527de4e6471bb360a936ef55d4b5.png