Vue.js--表单修饰符（.lazy、.number、.trim）详解

最新推荐文章于 2024-06-11 21:00:35 发布

怎么才这几个粉丝

最新推荐文章于 2024-06-11 21:00:35 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue 表单修饰符 lazy number trim

原文链接：https://blog.youkuaiyun.com/cold___play/article/details/102495409

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文深入解析Vue.js中的表单修饰符.lazy、.number与.trim的使用方法及应用场景，帮助开发者掌握如何利用这些修饰符提升表单数据处理效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创

Vue.js--表单修饰符（.lazy、.number、.trim）详解

2019-10-11 09:48:20 吴声子夜歌阅读数 217 文章标签： Vue.js 表单修饰符收起

分类专栏： Vue.js

本文链接： https://blog.youkuaiyun.com/cold___play/article/details/102495409

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据（除了输入法中文输入的情况），使用修饰符 .lazy 会转变为 change 事件中同步（类似懒加载）:

<div id="app1">
    <input type="text" v-model.lazy="message">
    <p>{{message}}</p>
</div>
<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            message:'测试'
        }
    });
</script>

     
     
     
     1
2
3
4
5
6
7
8
9
10
11
12

此时，message并不是实时更新的，而是在失焦或按回车时才更新。

.number

使用修饰符 .number 可以将输入转换为Number类型，否则虽然输入的数字，但它的类型其实是String，比如在数字输入框时非常有用：

<div id="app2">
    <input type="number" v-model.number="message">
    <p>{{ typeof message }}</p><br>
    <p>{{message}}</p>
</div>
<script>
    var app2 = new Vue({
        el: '#app2',
        data: {
            message: 123
        }
    });
</script>

     
     
     
     1
2
3
4
5
6
7
8
9
10
11
12
13

.trim

修饰符 .trim 可以自动过滤输入的首尾空格。

<div id="app3">
    <textarea name="txt" id="" cols="30" rows="10" v-model.trim="message"></textarea>
    <p>{{message}}</p>
</div>
<script>
    var app3 = new Vue({
        el: '#app3',
        data: {
            message: ''
        }
    });
</script>

     
     
     
     1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
                </div>
</article>
<div class="postTime">
            <div class="article-bar-bottom">
        <div class="reward-user-box">
            <span class="reward-word">有 <span class="num">0</span> 个人打赏</span>
                        </div>
    </div>
            <span class="time">
        文章最后发布于: 2019-10-11 09:56:29        </span>
</div>