v-model指令有三个可以选用的修饰符：.lazy、.number以及.trim。vue官方对此的描述为：

  • .number-输入字符串转为有效的数字
  • .lazy-取代input监听change事件
  • .trim-输入首尾空格过滤

　　官方链接：https://cn.vuejs.org/v2/api/#v-model

这三个修饰符的使用实例：（可尝试复制运行但需要正确的vue路径）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="div1">

        <!-- lazy修饰符  点击回车或者失去焦点时才发生数据响应 -->

        <input type="text" v-model.lazy="message">

        <h2>{{message}}</h2>

        <!-- number修饰符 将输入的内容直接作为number类型使用-->

        <input type="number" v-model.number="age">

        <h2>{{age}} {{typeof age}}</h2>

        <!-- trim修饰符 去除左右两边的空格 -->

        <input type="text" v-model.trim="trim">

        <h2>{{trim}}</h2>

    </div>

    <script src="vue.js"></script>

    <script>

        const app = new Vue({

            el:'#div1',

            data:{

                message:'修饰符',

                age:20,

                trim:''

            },

            methods:{

            }

        })

    </script>

</body>

</html>

Vue中v-model指令的常用修饰符的更多相关文章

  1. Vue中监听 键盘事件及修饰符

    键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F24 8            ...

  2. Vue.js-03：第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  3. Vue中v-on的指令以及一些其他指令

    1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...

  4. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  5. Vue.js-06：第六章 - 按键修饰符的使用

    一.前言  上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...

  6. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. vue中常见的指令

    1,差值表达式{{}} <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> ...

  8. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  9. Vue常用修饰符

    Vue提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的结果: 点击外层div的结果: 修改代 ...

随机推荐

  1. 使用位运算、值交换等方式反转java字符串-共四种方法

    在本文中,我们将向您展示几种在Java中将String类型的字符串字母倒序的几种方法. StringBuilder(str).reverse() char[]循环与值交换 byte循环与值交换 apa ...

  2. [apue] Linux / Windows 系统上只能建立不超过 PATH_MAX / MAX_PATH 长度的路径吗?

    问题的提出 在处理文件系统路径的时候,我们一般会先开辟一块内存区,用来接收路径.或者拼接好路径传递给系统调用.这是因为路径在各个系统上都有最大长度限制,在 Windows 上这个值是 MAX_PATH ...

  3. python+requests实现接口自动化

    1. 前言 今年2月调去支持项目接口测试,测试过程中使用过postman.jmeter工具,基本能满足使用,但是部分情况下使用较为麻烦.比如:部分字段存在唯一性校验或字段间有业务性校验,每次请求均需手 ...

  4. noi-vim配置

    colorscheme ron set t_Co=256 set mouse=a set ts=4 set sw=4 set nu set ru set ai set ci set cin set l ...

  5. Java中hashCode方法的理解以及此小结的总结练习（代码）

    笔记: “散列码”就是用来把一堆对象散到各自的队列里去的一种标识码. 举个形象一点的例子,一年有 365 天,从 1 编号到 365,下面我定义一种编码方法,每个人按照他生日那天的编号作为他的标识码, ...

  6. 题解 UVA501 【Black Box】

    思路与中位数一题,解决方案比较像,使用对顶堆来解决. 具体实现为,使用两个堆,大根堆维护较小的值,小根堆维护较大的值,即小根堆的堆顶是较大的数中最小的,大根堆的堆顶是较小的数中最大的. 将大于大根堆堆 ...

  7. 前端学习（九）：CSS基础

    进击のpython ***** 前端学习--CSS基础 CSS的样式可以写在哪呢?其实CSS的样式插入式十分灵活的 按照插入的形势来看,可以分为三种情况 而接下来就对这三种情况进行简单的讨论 内嵌式 ...

  8. python基础--14大内置模块(下)

    (9)正则表达式和re模块(重点模块) 在我们学习这个模块之前,我们先明确一个关系.模块和实际工作的关系. 1)模块和实际工作时间的关系 1.time模块和时间是什么关系?time模块和时间本身是没有 ...

  9. MYSQL_详细基本命令

    修改新密码:use mysql:update user set password='新密码' where user='用户名':flush privileges:  更新权限 增加新用户:grant ...

  10. SpringBoot整合Mail发送邮件&发送模板邮件

    整合mail发送邮件,其实就是通过代码来操作发送邮件的步骤,编辑收件人.邮件内容.邮件附件等等.通过邮件可以拓展出短信验证码.消息通知等业务. 一.pom文件引入依赖 <dependency&g ...