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. python3利用cryptography 进行加密和解密

    我们的日常工作中,一定会遇到需要加密的数据,比如:密码.私密信息... ... 我们不仅要对他们进行加密,更需要对他们进行解密,因为毕竟我们的用户应该不会看得懂加密过后的字符串吧!!! 在python ...

  2. T1 找试场 题解

    拖延症又犯了QwQ. 今天上午考试了,按照惯例,我仍然要把我会的所有题的题解写一遍. 1.找试场(way.cpp/in/out) 问题描述 小王同学在坐标系的(0,0)处,但是他找不到考试的试场,于是 ...

  3. python- generator生成器

    什么是生成器? 通过列表生成式,我们可以直接创建一个列表,但是,受到内存限制,列表容量肯定是有限的,而且创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后 ...

  4. list基本使用

    list和vector的用法基本相同,区别如下: list可以头尾插入和删除,效率一样,vector只有尾部插入和删除效率才高,头部操作效率很低 list的排序有专有的接口,不能使用全局的接口,原因是 ...

  5. 为什么在SpringBoot+maven的项目中，所引入的依赖包可以不指定依赖的版本号？

    当在Springboot项目中引入了spring-boot-starter-parent,则可以不用引入依赖包版本号,比如: <parent> <groupId>org.spr ...

  6. Oracle修改表类型方法

    有一个表名为tb,字段段名为name,数据类型nchar(20). 1.假设字段数据为空,则不管改为什么字段类型,可以直接执行:alter table tb modify (name nvarchar ...

  7. Monster Audio 使用教程 (六) 发送音轨的设置

    因为最近有些用户,不太清楚怎么发送给混响音轨,所以这里我简单介绍一下. Monster Audio的音轨,主要分为两种类型: 1.白色推子:表示普通音轨 2.蓝色推子:表示“可接收发送音轨”,其他音轨 ...

  8. goroutine间的同步&协作

    Go语言中的同步工具 基础概念 竞态条件(race condition) 一份数据被多个线程共享,可能会产生争用和冲突的情况.这种情况被称为竞态条件,竞态条件会破坏共享数据的一致性,影响一些线程中代码 ...

  9. Android集成Zxing

    1.在build文件中添加依赖 dependencies { //ZXing implementation 'com.google.zxing:core:3.3.3' implementation(' ...

  10. emacs 中文手册 命令行精简版

    man emacs  算是很全了吧.......一些不常用的没有写,不过我感觉没几个没写的.(c-x c-c退出emacs)c-v 下一屏m-v 上一屏c-l 重绘  光标定在屏幕中央(将光标所在的位 ...