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

傷城~ 2021-08-13 13:48 379阅读 0赞

#### .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>

此时，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>

#### .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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/e6a49006c0a243a0800d01092fbb5e4f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

相关单链表详解

单链表一.概念二.一些类型的创建三.尾插四.头插五.头删尾删六.打印链表七.单链表查找,任意

ゞ浴缸里的玫瑰/ 2024年03月26日 16:52/ 0 赞/ 50 阅读

相关 Flowable——表单详解

目录 Flowable表单 1、内置表单 1.1、启动流程实例 1.2、获取表单字段 1

爱被打了一巴掌/ 2023年10月16日 10:24/ 0 赞/ 70 阅读

相关 Vue表单域修饰符

Vue表单域修饰符 1：number：在用v-model进行双向绑定时，用number修饰符来将值转换成number型数值。 <input v-model.n

r囧r小猫/ 2023年02月10日 05:30/ 0 赞/ 18 阅读

相关 vue修饰符（事件修饰符，表单元素修饰符，按键修饰符）

注意修饰符可连缀事件修饰符 @事件名.修饰符=“” .prevent 拦截默认事件 .stop 拦截冒泡事件 .capture 改变事件执行顺序 .se

绝地灬酷狼/ 2022年11月29日 11:26/ 0 赞/ 229 阅读

相关【Java修饰符】（1）static修饰符详解

static 表示静态，它可以修饰属性，方法和代码块。 1.static修饰属性（类变量），那么这个属性就可以用类名.属性名来访问，也就是使这个属性成为本类的

太过爱你忘了你带给我的痛/ 2022年07月13日 13:14/ 0 赞/ 214 阅读

相关 Vue表单输入绑定修饰符

Vue表单输入绑定修饰符 .lazy .number .trim .lazy 在默认情况下，`v-model` 在每次 `input` 事件

╰半夏微凉°/ 2021年10月20日 01:12/ 0 赞/ 393 阅读

相关 Vue.js--表单绑定数据、修饰符详解

单行输入框 <div id="myApp"> <h1>表单控件绑定</h1> <input type="text" v-model

刺骨的言语ヽ痛彻心扉/ 2021年08月13日 19:46/ 0 赞/ 398 阅读

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

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

傷城~/ 2021年08月13日 13:48/ 0 赞/ 380 阅读

相关 Vuejs基本知识(十二)【表单的绑定】

基本上，所有的表单项，无论是`<input/>`, 还是 `<textarea/>`，都需要使用 `v-model`来绑定。表单项: `input, textarea,

约定不等于承诺〃/ 2021年06月26日 16:06/ 0 赞/ 475 阅读

相关 Vuejs基本知识(十三)【表单的提交】

大家要切记这一点：　在任何 `Single Page Ap`p中，js代码都不会产生. 一个传统意义的`form`表单提交！（这会引起整个页面的刷新）所以，我们往往用事件来

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 545 阅读