Vue的v-model.number顾名思义，即是将绑定的参数中的字符串强制转换为int类型

而v-model.trim是将参数的前后空格删除

v-model.lazy：v-model的绑定是实时响应，lazy则是在输入完成后，焦点离开v-model绑定的控件后响应，相当于change事件

以下是实例：

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

    <style type="text/css">

      div{

        margin: 30px;

      }

      .mulitStyle{

        height:auto;

        }

    </style>

</head>

<body>

<div id="app">

    <form action="https://www.baidu.com">

      <div>

        <input type="text" name="" v-model.number="age">

        <input type="text" name="" v-model.trim="uname">

        <input type="text" name="" v-model.lazy="age">

      </div>

      <div><input type="submit" name="" @click.prevent="handle"></div>

    </form>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

new Vue({

  el: '#app',

  data: {

    uname:'张三',

    age:''

  },

  methods:{

    handle:function(){

    console.log(this.uname);

    console.log(this.age+3);

    }

  }

})

</script>

</body>

</html>

2021-7-9 VUE的number\trim\lazy的更多相关文章

  1. 037——VUE中表单控件处理之表单修饰符：lazy/number/trim

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 表单修饰符.lazy.number.trim

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  3. Vue表单修饰符（lazy,number,trim）

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

  4. Vue 收集表单数据-输入input,单选radio,多选checkbox,下拉框select ,以及v-model的3个修饰符(lazy,number,trim)

    From案例分析: 1.Html 部分: <form @submit.prevent="" style=" border: 1px solid rgb(109, 2 ...

  5. vue修饰符 .lazy .number .trim

    .lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...

  6. vue v-modle修饰符.number .trim

    语法糖: 在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发. .number:可以将输入转换成Number类型,否则虽然输入的是数字,但它的类型其实是String. .trim:自动 ...

  7. v-model指令后面跟的参数（number、lazy、debounce）

    1. number 想将用户的输入自动转换为Number类型(如果原值的转换结果为NaN, 则返回原值) 2. lazy 在默认情况下, v-model在input事件中同步输入框的值和数据, 我们可 ...

  8. vue从入门到进阶：指令与事件（二）

    一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...

  9. 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  10. Vue教程：指令与事件（二）

    一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...

随机推荐

  1. Vue项目的网络请求代理到封装详细步骤

    1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 ...

  2. vite不能选配方案？vite-creater强势来袭！

    我正在参加「掘金·启航计划」 项目背景 vite出现之后,迅速带走了一大波webpack的使用者,即使是对打包工具不熟悉的小白,也能很快感受到两者的区别--vite快的多! vite官方文档第一句也是 ...

  3. Centos7.x 安装 nmon性能监控工具

    一.简介 nmon 工具可以帮助在一个屏幕上显示所有重要的性能优化信息,并动态地对其进行更新.这个高效的工具可以工作于任何哑屏幕.telnet 会话.甚至拨号线路.另外,它并不会消耗大量的 CPU 周 ...

  4. FFmpeg开发笔记（二）搭建Windows系统的开发环境

    由于Linux系统比较专业,个人电脑很少安装Linux,反而大都安装Windows系统,因此提高了FFmpeg的学习门槛,毕竟在Windows系统搭建FFmpeg的开发环境还是比较麻烦的.不过若有已经 ...

  5. 求解 LCA の方法

    最近公共祖先(LCA) 最近公共祖先简称 LCA(Lowest Common Ancestor).两个节点的最近公共祖先,就是这两个点的公共祖先里面,离根最远的那个. -----oi wiki 举个例 ...

  6. 【解决方法】白嫖利用WPS自带C盘清理大师，清理C盘空间，自测清理19.5G空间，太感人了！

    环境: 工具:WPS-WPS清理大师 系统版本:Windows 10 问题描述: 描述:本人C盘常年不足10G,也用过一些其他的清理工具,但是也不懂,不敢乱删除东西.一直得过且过. 由于C盘中有很多的 ...

  7. StarCoder: 最先进的代码大模型

    关于 BigCode BigCode 是由 Hugging Face 和 ServiceNow 共同领导的开放式科学合作项目,该项目致力于开发负责任的代码大模型. StarCoder 简介 StarC ...

  8. django购物车的实现

    1 购物车的实现问题思路 购物车需求分析: 1 未登陆和已登陆都保存到用户的购物车数据. 2 用户可以对购物车进行增删改查: 3 购物车有选择状态,只有选中的状态才能生成订单: 4 用户登陆时,合并c ...

  9. redis.conf 7.0 配置和原理全解，生产王者必备

    5.5 redis.conf 配置详解 我是 Redis, 当程序员用指令 ./redis-server /path/to/redis.conf 把我启动的时候,第一个参数必须是redis.conf ...

  10. vs2022的一些调试技巧——远程调试&线程检查&性能检查

    visual studio一直都是.net/c#开发人员最受欢迎的编译器,除了强大的代码提示和项目模板,还拥有大量的调试工具,这一期我们介绍下code freeze阶段的一些调试技巧.包括测试环境/生 ...