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的 ...
随机推荐
- 转载：java面试题(二)
这部分主要是开源Java EE框架方面的内容,包括Hibernate.MyBatis.Spring.Spring MVC等,由于Struts 2已经是明日黄花,在这里就不讨论Struts 2的面试题, ...
- 笔记72 高级SSM整合
遇到的问题: 1.进行spring mvc测试的时候报错 测试代码: package com.li.test; import com.github.pagehelper.PageInfo; impor ...
- Solr添加索引
发送请求: http://localhost:8080/solr/update/?stream.body= <delete><id>id值</id></del ...
- 目标检测中roi的有关操作
1.roi pooling 将从rpn中得到的不同Proposal大小变为fixed_length output, 也就是将roi区域的卷积特征拆分成为H*W个网格,对每个网格进行maxpooling ...
- Echarts mc地图
Echarts mc地图 echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xSNlA5O-zl 效果: 代码: <html> ...
- 如何编写高性能的 javascript
一．Javascript代码执行效率1. DOM1.1 使用 DocumentFragment 优化多次 append说明:添加多个 dom 元素时,先将元素 append 到 DocumentFra ...
- Scrapy爬虫实战-爬取体彩排列5历史数据
网站地址:http://www.17500.cn/p5/all.php 1.新建爬虫项目 scrapy startproject pfive 2.在spiders目录下新建爬虫 scrapy gens ...
- Linux的文件访问权限及修改权限命令chmod
http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...
- shell 从函数文件中调用函数的方法
你可以把所有的函数存储在一个函数文件中 你可以把所有的文件函数加载到当前脚本或命令行 加载函数文件中所有函数的方法: source xxx.sh
- submlie 配置php运行
选择 "工具" -- "编译系统" -- "新编译系统"(英文版对应为 "Tools" -- "Build S ...