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的 ...
随机推荐
- 使用Makefile编译Erlang
#配置选项,可以是DEBUG和RELEASE CONFIG ?= RELEASE #语言配置,可以是chs(简体中文).cht(繁体中文)等等 Region ?= chs #源文件目录 SOURCE_ ...
- CascadeCNN人脸检测结构
模型的结构大致由图可以完整展现,三个分类是否人脸的12.24.48net,再加上三个用于修正预测框的分类网络: 这三个分类是否人脸的网络,结构逐渐变复杂, 由上图可以看出,前2阶的网络都非常简单,只有 ...
- 卸载Anaconda
conda install anaconda-clean anaconda-clean --yes Anaconda 安装的时候在 .bash_profile中添加了变量: export PATH=& ...
- 深度解析双十一背后的阿里云 Redis 服务
摘要: Redis是一个使用范围很广的NOSQL数据库,阿里云Redis同时在公有云和阿里集团内部进行服务,本文介绍了阿里云Redis双11的一些业务场景:微淘社区之亿级关系链存储.天猫直播之评论商品 ...
- php number_format()函数 语法
php number_format()函数 语法 number_format()函数怎么用? php number_format()函数表示通过千位分组来格式化数字,语法是number_format( ...
- RBAC权限设计（一）
序言 RBAC表结构 用户表 角色表 权限表 用户角色(关系)表 角色权限(关系)表 sql脚本 /* Navicat MySQL Data Transfer Source Server : 127. ...
- 一起探讨下POST、GET请求
以下的讨论都是基于java和Spring MVC,主要记录自己的一些练习心得. 做web网站开发HTTP请求必不可少,一直在使用写好的Utils没有考虑过如何以及为什么,现在闲下来想着捋一捋java的 ...
- HDU 6610 Game — 2019第三场杭电多校 1008题
目录 题意 思路 AC_Code @(hdu 6610) 题意 大概说一下我理解的题意... 链接:here 你有\(n\)堆石子,每堆石子有\(a_i\)个石子.游戏规则:\(Alice\)先选择一 ...
- Node.js 开发技能图谱
# Node.js 开发技能图谱 ## Node.js 语言环境搭建 - Node.js 安装(3m大法:nvm.npm.nrm)- Node.js 命令- Node.js开发工具(推荐vscode) ...
- spring boot starter开发
作为公司的技术保障部,一直承担着技术方向的把控,最近公司准备全面转入spring boot的开发.所以我们部门也一直在调研相关的技术知识点: 使用springboot开发应用已经有一段时间了,我们都沉 ...