zoukankan      html  css  js  c++  java
  • Vue表单修饰符(lazy,number,trim)

    lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步

    复制代码
    <div id="example">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
    </div>
    
    new Vue({
       el:"#example",
       data:{
         message:""
       }
    })
    复制代码

    这样输入了数字并没有显示出来而是当移开光标后在触发

    number

    首先谁明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型

    举个例子,如果用户输入300,data 中绑定的其实是'300'(string),添加 number 指令后可以得到 300(number)的绑定结果。
    而如果用户输入的不是数字,这个指令并不会产生任何效果。

    上代码:

    1 <div id="example">
    2     <input type="text" v-model.number="message">
    3     <p>{{ message }}</p>
    4     <button @click="assay()">获取当前的类型</button>
    5 </div>
    复制代码
     1 new Vue({
     2    el:"#example",
     3    data:{
     4      message:""
     5    },
     6    methods:{
     7      assay(){
     8        alert(typeof this.message);
     9      }
    10    }
    11 })
    复制代码

    当不加number修饰符输入123456..数字的时候显示的类型为string

     而加了number修饰符就变成了number类型

     当你输入的不是数字就不起作用了

    trim可以用来过滤前后的空格

    当使用了trim修饰符后

    这样就自动过滤用户输入的首尾空白字符

  • 相关阅读:
    记事本:js简介
    python 类的魔法函数 内置函数 类方法 静态方法 抽象类
    python 类
    python 列表 元组 字典 集合
    python:函数和循环判断
    记事本:盒模型
    第5章学习小结
    倍增法求LCA(最近公共最先)
    L
    第4章学习小结
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/9301121.html
Copyright © 2011-2022 走看看