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. Python 图像处理 OpenCV （14）：图像金字塔

    前文传送门: 「Python 图像处理 OpenCV (1):入门」 「Python 图像处理 OpenCV (2):像素处理与 Numpy 操作以及 Matplotlib 显示图像」 「Python ...

  2. （4）webpack中配置css，scss，less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  3. Python3 生成器解析

    第6章 函数 6.1 函数的定义和调用 6.2 参数传递 6.3 函数返回值 6.4 变量作用域 6.5 匿名函数(lambda) 6.6 递归函数 6.7 迭代器 6.8 生成器 6.9 装饰器 6 ...

  4. Android 性能优化 ---- 内存优化

    1.Android内存管理机制 1.1 Java内存分配模型 先上一张JVM将内存划分区域的图 程序计数器:存储当前线程执行目标方法执行到第几行. 栈内存:Java栈中存放的是一个个栈帧,每个栈帧对应 ...

  5. /dev/mapper/VolGroup00-LogVol00 满了，根目录存储垃圾文件导致磁盘满了

    登录系统,df -H 发现磁盘存储快满了 解决办法 1. 使用命令查出根目录下大的垃圾文件 使用 du -sh /* | sort -nr 查看根目录下的的大文件,找的不要的 rm -rf 使用 fi ...

  6. 雨云CDN - 好用的CDN服务

    注册雨云 点我 创建CDN     解析CDN 解析完后去试试快了吗?

  7. C++与正则表达式入门

    什么是正则表达式? 正则表达式是一组由字母和符号组成的特殊文本, 当你想要判断许多字符串是否符合某个特定格式:当你想在一大段文本中查找出所有的日期和时间:当你想要修改大量日志中所有的时间格式,在这些情 ...

  8. spring oauth2+JWT后端自动刷新access_token

    这段时间在学习搭建基于spring boot的spring oauth2 和jwt整合. 说实话挺折腾的.使用jwt做用户鉴权,难点在于token的刷新和注销. 当然注销的难度更大,网上的一些方案也没 ...

  9. 好用到飞起的12个jupyter lab插件

    1 简介 jupyter lab作为jupyter notebook的升级改造版,除了更加人性化的交互界面以及更多的用户自主定制功能之外,最吸引人的就是其丰富多样的拓展插件,使得每个使用jupyter ...

  10. 2.pandas的数据结构

    对于文件来说,读取只是最初级的要求,那我们要对文件进行数据分析,首先就应该要知道,pandas会将我们熟悉的文件转换成了什么形式的数据结构,以便于后续的操作 数据结构 pandas对文件一共有两种数据 ...