语法糖: 在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。

.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的更多相关文章

  1. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  2. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  3. Vue表单修饰符(lazy,number,trim)

    lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...

  4. 表单修饰符 number、trim、lazy

    number修饰符 <input type="number" v-model.number="age"> 结论:age 类型则为number,非字符 ...

  5. vue 指令和修饰符

    1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者 ...

  6. vue常用的修饰符

    v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...

  7. Vue - 表单修饰符

    .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 . 使用 lazy 修饰符,从而转变为使用 change 事件进行同步 <div id=&qu ...

  8. elementUI vue v-model的修饰符

    v-model的修饰符 v-model.lazy 只有在input输入框发生一个blur时才触发 v-model.trim 将用户输入的前后的空格去掉 v-model.number 将用户输入的字符串 ...

  9. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

随机推荐

  1. 小白jquery横向菜单弹出菜单制作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. find和grep技巧

    1. find ./ -name "*streaming*"  查找文件 2.  grep -r KUBE_LOGTOSTDERR /etc/kubernetes/*  查找内容

  3. python 常用技巧 — 数组 (array)

    目录: 1. 数组每一行除以这一行的总数(numpy divide row by row sum) 2. 数组每一行或者每一列求平均 (python average array columns or ...

  4. 【leetcode】988. Smallest String Starting From Leaf

    题目如下: Given the root of a binary tree, each node has a value from 0 to 25representing the letters 'a ...

  5. Vue.js(五)

    前后端交互概述与URL地址格式 JS中常见的异步调用: 定时任务 ajax 事件函数 接口调用方式: 原生ajax 基于jQuery的ajax fetch axios url 地址格式: 传统的url ...

  6. loadRunner之参数关联

    录制脚本,对用户名和密码进行参数化: Action() { web_url("WebTours", "URL=http://127.0.0.1:1080/WebTours ...

  7. TextView详解

    android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all)android: ...

  8. vue中setTimeout切换浏览器页签时怎么清除解决方案

    大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...

  9. SQL必知必会——插入数据(十五)

    1.数据插入 INSERT用来将行插入(或添加)到数据库表.插入有几种方式: 插入完整的行插入行的一些部分插入某些查询的结果注意:1.使用INSERT语句可能需要客户端/服务端DBMS中的特定安全权限 ...

  10. “void * __cdecl operator new(unsigned int)”(??2@YAPAXI@Z) already defined in LIBCMTD.lib(new.obj)

    转自VC错误:http://www.vcerror.com/?p=1377 问题描述: 当 C 运行时 (CRT) 库和 Microsoft 基础类 (MFC) 库的链接顺序有误时,可能会出现以下 L ...