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的 ...
随机推荐
- js使用childnodes获取子节点时多了text节点
当我们获取标签的节点时如果使用childnodes发现它会把空格和回车都算着节点,明明里面才有3个节点,结果显示5个,而且childnodes[0]="text" 在IE浏览器中没 ...
- 百度地图，删除marker,创建marker
-------------------[删除marker]-----------------------------success: function(data){ if(data.length> ...
- （转）Uncaught TypeError: Cannot set property 'innerHTML' of null
(转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...
- 07-图5 Saving James Bond - Hard Version（30 分）
This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...
- websocket 文件上传
<template> <div class="pad20"> <input id="file" ref="f ...
- 【Shiro】四、Apache Shiro授权
1.授权实现方式 1.1.什么是授权 授权包含4个元素(一个比较流行通用的权限模型) Resources:资源 各种需要访问控制的资源 Permissions:权限 安全策略控制原子元素 基于资源和动 ...
- java com.db4o 类
<!--juan_zhai--> <dependency> <groupId>com.db4o</groupId> <artifactId> ...
- ES6数组中删除指定元素
知识点: ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. arr.splice(arr.findIndex(item => ...
- jpql简单l查询
JPQL全称Java Persistence Query Language package com.ytkj.entity; import javax.persistence.*; import ja ...
- 爬虫（四）—— 使用pyecharts展示数据
pyecharts模块 pyecharts可以将数据形象的在页面中用图表显示 一.安装 pip install pyecharts 二.使用 import pyecharts # 创建一个页面 pag ...