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. Prometheus监控之SNMP Exporter介绍和数据展现

    由于技术能力有限,文章仅能进行简要分析和说明,如有不对的地方,请指正,谢谢. 1 SNMP协议介绍 SNMP协议全称是:Simple Network Management Protocol,译为简单网 ...

  2. [双目视差] 立体匹配算法推理 - SGBM算法（二）

    文章目录 立体匹配算法推理 - SGBM算法(二) 一.SGM算法 二. 后处理 立体匹配算法推理 - SGBM算法(二) 一.SGM算法 SGM算法的全称为Semi-Global Matching, ...

  3. [Pytorch框架] 5.2 Pytorch处理结构化数据

    文章目录 5.2 Pytorch处理结构化数据 简介 数据预处理 定义数据集 定义模型 训练 import numpy as np import pandas as pd import torch f ...

  4. MySQL 中读写分离数据延迟

    MySQL 中读写分离可能遇到的问题 前言 读写分离的架构 基于客户端实现读写分离 基于中间代理实现读写分离 MySQL 中如何保证主从数据一致 循环复制问题 主从同步延迟 主从同步延迟的原因 主从延 ...

  5. Python分割多空格字符方法

    问题: 现有一个字符串 "1 + 5" ,想要获取 1,+,5 这三个元素 做法: str.split(' ') ['1', '', '', '', '', '', '+', '' ...

  6. 整合vxgPlayer使chrome支持vxg_media_player播放rtsp视频

    目前有一个关于接入海康监控进行视频融合的项目需求,按理说在前端技术发展如此迅速的今天,使用web播放一个视频应该是不算什么难事,只是万事都有意外,因很多视频厂家的监控数据都不是普通的mp4啥的,所以使 ...

  7. Springboot——参数校验

    springboot参数校验注解 在controller层需要对前端传来的参数进行校验 校验简单数据类型 使用springboot自带的validation工具可以从后端对前端传来的数据进行校验 使用 ...

  8. odoo开发教程十三：qweb报表

    一:概述 报表是使用qweb定义的,报表的pdf导出是使用wkhtmltopdf来完成的. 如果需要为一个模型创建报表,需要定义report及对应模板. 如果有需要的话还可以指定特定的纸张格式, 如果 ...

  9. node版本问题：Error: error:0308010C:digital envelope routines::unsupported

    前言 出现这个错误是因为 node.js V17及以后版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响. 在node.j ...

  10. C2简介

    C2简介 学习命令与控制的基本知识,帮助您成为更好的红队队员并简化您的下一次红队评估! thm:https://tryhackme.com/room/introtoc2 介绍 命令与控制 ( C2 ) ...