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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="div1">
  10.         <!-- lazy修饰符  点击回车或者失去焦点时才发生数据响应 -->
  11.         <input type="text" v-model.lazy="message">
  12.         <h2>{{message}}</h2>
  13.         <!-- number修饰符 将输入的内容直接作为number类型使用-->
  14.         <input type="number" v-model.number="age">
  15.         <h2>{{age}} {{typeof age}}</h2>
  16.         <!-- trim修饰符 去除左右两边的空格 -->
  17.         <input type="text" v-model.trim="trim">
  18.         <h2>{{trim}}</h2>
  19.     </div>
  20.  
  21.     <script src="vue.js"></script>
  22.     <script>
  23.         const app = new Vue({
  24.             el:'#div1',
  25.             data:{
  26.                 message:'修饰符',
  27.                 age:20,
  28.                 trim:''
  29.             },
  30.             methods:{
  31.  
  32.             }
  33.         })
  34.     </script>
  35. </body>
  36. </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. 【IDEA】创建maven项目，webapp没有被标识，无法识别

    问题描述 新建maven项目模块后,webapp目录未被标识,也就是没有小蓝点的图标显示. 解决方法 点击"File"下的"Project Strucure", ...

  2. bzoj1745[Usaco2005 oct]Flying Right 飞行航班*

    bzoj1745[Usaco2005 oct]Flying Right 飞行航班 题意: n个农场,有k群牛要从一个农场到另一个农场(每群由一只或几只奶牛组成)飞机白天从农场1到农场n,晚上从农场n到 ...

  3. 小白从零开始阿里云部署react项目+node服务接口（三：部署到服务器）

    服务器 准备工具 依次安装即可 nginx 安装nginx https://www.runoob.com/linux/nginx-install-setup.html 配置全局nginx命令 http ...

  4. 计算思维（Computational Thinking）在少儿编程中的体现

    本文主要针对少儿编程从业人员及正在学习编程的学生家长 大家好,我是C大叔,国内早期的少儿编程从业人员.一直以来都是在做scratch,JavaScript,python以及信息学奥赛C++的讲师,教研 ...

  5. CentOS7编译安装php7.1配置教程详解

    这篇文章主要介绍CentOS7编译安装php7.1的过程和配置详解,亲测 ,需要的朋友可以参考. 1.首先安装依赖包: yum install libxml2 libxml2-devel openss ...

  6. 用windbg查看dmp文件，定位bug位置

    windbg + .dmp + .pdb + 源代码,可以看到是哪个代码崩溃的 设置符号文件所在路径 File->Symbol File Path... 在输入框中填入.pdb文件所在的文件夹路 ...

  7. Jmeter性能测试使用指南

    图床如果失效,可以关注二维码,公众号查阅. JMeter安装 1.下载地址: https://downloads.apache.org//jmeter/binaries/apache-jmeter-5 ...

  8. Usvn迁移

    近期由于公司需要整理所有的服务器资源进行统一管理,因此需要迁移原usvn到新环境,但是在网上查找有关usvn的迁移信息没有结果,故整理自己的通过测试的迁移方案共享给大家 迁移列表 原服务器 软件 目标 ...

  9. Spring+hibernate+JSP实现Piano的数据库操作---2.Controller+Service+Dao

    Controller package com.controller; import com.entity.Piano; import org.dom4j.rule.Mode; import org.s ...

  10. transaction already active

    这个问题是使用spring 事务管理时经常出现的错误,最开始时相当令我头疼,也不知道是哪里出现的问题.在网上找了一阵后,依然无解.意思就是说上一个事务处于激活状态中,不能开始新的数据库更新操作. // ...