2021-7-9 VUE的number\trim\lazy
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的更多相关文章
- 037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 表单修饰符.lazy.number.trim
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Vue表单修饰符（lazy,number,trim）
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...
- Vue 收集表单数据-输入input,单选radio,多选checkbox,下拉框select ,以及v-model的3个修饰符(lazy,number,trim)
From案例分析: 1.Html 部分: <form @submit.prevent="" style=" border: 1px solid rgb(109, 2 ...
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...
- vue v-modle修饰符.number .trim
语法糖: 在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发. .number:可以将输入转换成Number类型,否则虽然输入的是数字,但它的类型其实是String. .trim:自动 ...
- v-model指令后面跟的参数（number、lazy、debounce）
1. number 想将用户的输入自动转换为Number类型(如果原值的转换结果为NaN, 则返回原值) 2. lazy 在默认情况下, v-model在input事件中同步输入框的值和数据, 我们可 ...
- vue从入门到进阶：指令与事件（二）
一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- Vue教程：指令与事件（二）
一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...
随机推荐
- Object o = new Object();
对象的创建过程: 1,申请内存,并初始化: 2,构造器初始化: 3,o指向对象. 对象在内存中的存储布局: 使用jol工具打印java对象在内存的存储布局: 其中,对象头的组成: 对象头包括Mark ...
- Tomacat乱码和报错UTF-8 序列的字节 2 无效和‘application/json；charset=UTF-8‘ not supported的处理
文章目录 前言 1. tomcat乱码的处理方法 2. applicationContext.xml报错2 字节的 UTF-8 序列的字节 2 无效 3. 报错'application/json;ch ...
- LeetCode 周赛 343（2023/04/30）结合「下一个排列」的贪心构造问题
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 今天是五一假期的第二天,打周赛的人数比前一天的双周赛多了,难道大家都只玩一天吗?这场周赛 ...
- MySQL(Zip版)安装配置
MySQL官网下载地址:MySQL 将压缩包内文件夹解压至任意目录,以mysql-5.7.40版本为例 第一步 添加环境变量 将mysql-5.7.40-winx64文件夹内的bin文件夹添加到环境变 ...
- Selenium - 浏览器配置(4) - 打开无痕浏览器
Selenium - 浏览器配置 无痕浏览器 开启谷歌浏览器的无痕浏览模式: from selenium import webdriver # 引入浏览器配置 chrome_options = web ...
- < Python全景系列-3 > Python控制流程盘点及高级用法、神秘技巧大揭秘！
欢迎来到我们的系列博客<Python全景系列>!在这个系列中,我们将带领你从Python的基础知识开始,一步步深入到高级话题,帮助你掌握这门强大而灵活的编程语法.无论你是编程新手,还是有一 ...
- UCOS II源码分析二
最近大家都沉浸在找到实习的快乐中,自我充电的时间相对减少了,今天重拾一下ucosii的学习,记录如下: 上一篇文章分析了ucosii源码文件组织结构以及简单介绍了各个文件夹里对应文件的功能,要是对uc ...
- Updates were rejected because the tip of your current branch is behind
最近本地一个flutter项目因为当时使用可视化创建的时候出了一些问题,但是起初没有注意,后来因为需要新增一个语音插件,需要修改原生android MainActivity.java,才发现这个目录根 ...
- 安装Visio 2016与原本的office冲突的最终解决方案
一. 下载office visio 2016 二. 开始安装 但是提示卸载原本的office 三. 网上找寻答案 于是按照这篇文章https://jingyan.baidu.com/article/1 ...
- 快速上手kettle(二)小试牛刀
目录 一 .前言 二 .两个小目标 三. kettle核心概念介绍 3.1 转换 3.1.1 步骤(Step) 3.1.2 跳(Hop) 3.1.3 元素据 3.1.4 数据类型 3.1.5 并发执行 ...