vue v-modle修饰符.number .trim
语法糖： 在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
.number：可以将输入转换成Number类型，否则虽然输入的是数字，但它的类型其实是String。
.trim：自动过滤输入的首尾空格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<input type="number" v-model="message" />
<p>{{ typeof message }}</p>
<input type="number" v-model.number="messageNumber" />
<p>{{ typeof messageNumber }}</p>
<input type="text" v-model.trim="messageTrim" />
<p>{{ messageTrim }}</p>
</div>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message: 123,
messageNumber: 123,
messageTrim:''
}
}) </script>
</body>
</html>
vue v-modle修饰符.number .trim的更多相关文章
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- Vue表单修饰符（lazy,number,trim）
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...
- 表单修饰符 number、trim、lazy
number修饰符 <input type="number" v-model.number="age"> 结论:age 类型则为number,非字符 ...
- vue 指令和修饰符
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者 ...
- vue常用的修饰符
v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...
- Vue - 表单修饰符
.lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 . 使用 lazy 修饰符,从而转变为使用 change 事件进行同步 <div id=&qu ...
- elementUI vue v-model的修饰符
v-model的修饰符 v-model.lazy 只有在input输入框发生一个blur时才触发 v-model.trim 将用户输入的前后的空格去掉 v-model.number 将用户输入的字符串 ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
随机推荐
- 开源的android客户端，ghost网站
https://github.com/TryGhost/Ghost-Android http://docs.ghostchina.com/zh/
- vue-router中的router-link的active-class
vue-router中的router-link的active-class 在vue-router中要使用选中样式的方法有两种: 1.直接在路由js文件中配置linkActiveClass 2.在r ...
- jquery 选项卡切换 带背景图片
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- mitmproxy 代理介绍及入门
转载请注明出处 https://www.cnblogs.com/majianming/p/11823669.html mitmproxy 是一个python 写成的代理工具,可以代理https.htt ...
- Struts2增删改查（自己思路理解）
1:查询所有: DAO层:把所有的信息都放到list集合中.然后返回. public List<Employee> getEmployees(){ return new ArrayList ...
- linux-usb软件系统架构
1.软件系统架构 USB主控制器,芯片里面自带了得.为了让USB主控制器运行,所有有USB主控制器驱动. USB核心,内核提供好的USB协议之类的.USB设备驱动是针对插到接口的设备去工作的软件. 主 ...
- LR快捷键
record optioning:录制选项——ctrl+f7 runtime setting : 运行时设置——F4 运行脚本——F5 参数列表:ctrl+L 注释:ctrl+shift+c 选中后 ...
- [CSP-S模拟测试]:抛硬币（DP）
题目背景 小$A$和小$B$是一对好朋友,他们经常一起愉快的玩耍.最近小$B$沉迷于**师手游,天天刷本,根本无心搞学习.但是小$B$已经入坑了几个月,却一次都没有抽到$SSR$,让他非常怀疑人生.勤 ...
- Python Numpy 矩阵级基本操作(2)
1.开方与求e指数 import numpy as np from numpy.matlib import randn print "Test sqrt and exp" arr ...
- 3.Jmeter 快速入门教程(三-1) --添加响应断言（即loadrunner中所指的检查点）
上一节课,我们创建了一个测试场景,并进行了少量vuser的负载测试. 有时候我们执行了测试,但是发现并不是所有事务都执行成功了. 那是因为我们只是发起了测试,但并没有对每次请求测试的返回作校验. 所以 ...