Vue中v-model指令的常用修饰符
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指令的常用修饰符的更多相关文章
- Vue中监听 键盘事件及修饰符
键盘事件: keyCode 实际值 48到57 0 - 9 65到90 a - z ( A-Z ) 112到135 F1 - F24 8 ...
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- Vue中v-on的指令以及一些其他指令
1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- Vue.js-06:第六章 - 按键修饰符的使用
一.前言 上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue中常见的指令
1,差值表达式{{}} <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> ...
- vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
- Vue常用修饰符
Vue提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的结果: 点击外层div的结果: 修改代 ...
随机推荐
- PHP提示dyld: Library not loaded问题解决
Mac在命令行执行php命令时,如php -v 有错误提示: dyld: Library not loaded: /usr/local/opt/openssl/lib/libcrypto.1.0..d ...
- iis 0x80070032 Cannot read configuration file because it exceeds the maximum file size
问题:iis部署了网站,由于webconfig文件过大(251kb,默认250kb)导致网站报错 0x80070032 Cannot read configuration file because i ...
- 5分钟带你快速入门和了解 OAM Kubernetes
什么是 OAM? OAM 的全称为开放应用模型(Open Application Model),由阿里巴巴宣布联合微软共同推出. OAM 解决了什么问题? OAM 本质是为了解耦K8S中现存的形形色色 ...
- vue 应用 :关于 ElementUI 的 message 组件
我们知道,这个东西的基本用法是这样的: this.$message({ message: '恭喜你,这是一条成功消息', type: 'success' }); 但是我觉得这样还是有点麻烦,所以我决定 ...
- 【JVM之内存与垃圾回收篇】类加载子系统
类加载子系统 概述 完整图如下: 如果自己想手写一个 Java 虚拟机的话,主要考虑哪些结构呢? 类加载器 执行引擎 类加载器子系统作用 类加载器子系统负责从文件系统或者网络中加载 Class 文件, ...
- 浅谈6种JS数组遍历方法的区别
本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- Java中的大数值使用
在Java中,偶尔会遇到超大数值,超出了已有的int,double,float等等你已知的整数.浮点数范围,那么可以使用java.math包中的两个类:BigInteger和BigDecimal. 这 ...
- React Native 中使用Redux
参考https://jspang.com/detailed?id=48和印度同事的代码简单整理一下在RN中使用Redux的步骤 1. 首先我们应该先了解Redux是什么,什么情况下需要用到它 在Red ...
- 解决node 运行接口 出现 Cannot destructure property `us` of 'undefined' or 'null'.
出现 参数是 undefined or null 一.检查是否安装 body-parser server.js中是否引入 app.use(bodyParser.urlencoded({ extende ...
- yield 复习
1.协程,微型进程: yield 生成器 yield 会保存声明的变量,可以进行迭代 使用 接收函数返回的对象.__next__() next(接收函数返回的对象) .send() 方法 传递给函数中 ...