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

.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. The Preliminary Contest for ICPC Asia Xuzhou 2019 I J

    I. query 题意:给出n的一个排列,有m个询问[l,r],询问[l,r]直接有倍数关系的pair个数. 解法:比赛完之后听说是原题,但是我没做过呀,做题太少了qwq.首先因为数字是1-n的,所以 ...

  2. 解析mysql慢日志

    mysql慢日志太多,需要分析下具体有哪些慢日志 mysql可以直接记录所有慢日志,现在的问题是将日志文件sql进行去重 想了老半天该怎样将sql的查询字段去掉进行排序,没有get到重点.后来发现my ...

  3. 如何加快Vue项目的开发速度

    如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...

  4. react 获取token

    1.在action  中发送请求,j将获取得到的token  储存起来 到localhost //登陆发送请求 export const loginUser = (userData,history)= ...

  5. jsp获取url路径的方法

    如果你请求的URL是  http://localhost:8080/demo/Index.jsp request.getScheme() //输出:http request.getServerName ...

  6. 【leetcode】974. Subarray Sums Divisible by K

    题目如下: Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have ...

  7. leetcode-第14周双周赛-1273-删除树节点

    题目描述: 自己的提交:动态规划 class Solution: def deleteTreeNodes(self, nodes: int, parent: List[int], value: Lis ...

  8. vue 微信公众号分享后支付失效页面URL不变的坑

    微信分享后支付页面还是初始页面,这个问题解决了, created(){ //判断是否是IOS设备 // IOS分享时的页面是首页,也就是进入页而不是当前页.所有可以采用刷新当前页,让进入页的链接改成当 ...

  9. 使用Canvas操作像素

    现代浏览器支持通过<video>元素播放视频.大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头.但即使这两件事结合起来,我们也无法直接访问和操 ...

  10. 关于最近练习PYTHON代码的一点心得

    做测试以来,一直想学习代码,以前也断断续续的学习过,不过都是练习一些基础语法,学习的是菜鸟教程,但是效果不大. 最近在练习CODEWAR里做练习题,慢慢强化自己对一些基本语法的理解,熟悉基本的内置函数 ...