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

.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. Codeforces 1178E

    题意:给你一个长度为n的字符串,只包含a, b, c3种字符,字符串中相邻字符一定不同,问是否存在一个长度为n / 2(向下取整)的子序列是回文的,有就输出. 思路:相邻的字符一定不同,并且一共只有3 ...

  2. Solr添加索引

    发送请求: http://localhost:8080/solr/update/?stream.body= <delete><id>id值</id></del ...

  3. 【CSS3】transform-origin以原点进行旋转 (转)

    话不多说, 以左上角为原点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; 以右上 ...

  4. testNG之组测试

    @Test(groups = {""}) 在执行测试用例的时候,往往一个功能依赖多个测试用例,比如流程的测试,那么这个时候就可以用到组测试,把流程涉及到测试用例都分到同一组里,按组 ...

  5. legend2---17、legend2里面怎么面向对象

    legend2---17.legend2里面怎么面向对象 一.总结 一句话总结: mvc本身挺优:本身mvc的开发模式,就算是面向过程下也还行,如果面向对象那就更加棒了 实体类无需属性:由于php的生 ...

  6. SSH known_hosts / authorized_keys

    参考: http://blog.sina.com.cn/s/blog_148a693f10102vj8m.html 什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用 ...

  7. PHP面试 MySQL的SQL语句编写

    MySQL的SQL语句编写 面试题一 有A表(id,sex,par,c1,c2),B(id,age,c1,c2)两张表,其中A.id与B.id关联,现在要求写出一条SQL语句,将B中age>50 ...

  8. MySQL高级学习笔记（五）：查询截取分析

    文章目录 慢查询日志 是什么 怎么玩 说明 查看是否开启及如何开启 默认 开启 那么开启了慢查询日志后,什么样的SQL才会记录到慢查询日志里面呢? Case 配置版 日志分析工具mysqldumpsl ...

  9. grep 后加单引号、双引号和不加引号的区别

    请尊重版权,原文地址:https://blog.csdn.net/cupidove/article/details/8783968 单引号: 可以说是所见即所得:即将单引号内的内容原样输出,或者描述为 ...

  10. ACM-ICPC 比赛环境的使用

    ACM-ICPC 现场赛不同的赛站可能比赛环境不同,不过一般都是 Ubuntu 系统.附带的软件可能略有不同,可能会有使用习惯的差异导致效率下降或者无法运行代码,但是在终端下编译运行代码都是相同的.本 ...