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>这个将不会改 ...
随机推荐
- 【介绍】C++五种迭代器
目录 1. 输入迭代器(Input Iterator): 2. 输出迭代器(Output Iterator): 3. 前向迭代器(Forward Iterator): 4. 双向迭代器(Bidirec ...
- java优先队列PriorityQueue
文章目录 前言 PriorityQueue 优先队列 java中优先队列的声明 按优先级排序 常见方法 private void grow(int minCapacity) public boolea ...
- 2022-08-06：给定一个数组arr，长度为N，arr中所有的值都在1~K范围上， 你可以删除数字，目的是让arr的最长递增子序列长度小于K。 返回至少删除几个数字能达到目的。 N ＜= 10^4
2022-08-06:给定一个数组arr,长度为N,arr中所有的值都在1~K范围上, 你可以删除数字,目的是让arr的最长递增子序列长度小于K. 返回至少删除几个数字能达到目的. N <= 1 ...
- 2022-01-30：最小好进制。 对于给定的整数 n, 如果n的k（k＞=2）进制数的所有数位全为1，则称 k（k＞=2）是 n 的一个好进制。 以字符串的形式给出 n, 以字符串的形式返回 n 的
2022-01-30:最小好进制. 对于给定的整数 n, 如果n的k(k>=2)进制数的所有数位全为1,则称 k(k>=2)是 n 的一个好进制. 以字符串的形式给出 n, 以字符串的形式 ...
- 给你安利一款国产良心软件uTools
前言 大家好,我是xiezhr 最近由于换了新电脑,也是在各种折腾搭建开发环境,安装各种常用软件.今天呢给大家安利一款你可能没用过的国产良心软件uTools,这也是我刚刚拿到电脑后安装的第一款软件吧. ...
- Netty自定义协议要素
魔数:用来判断是否是无效数据包 协议版本号:可以支持协议的升级 序列化算法:消息正文使用哪种序列化方式,可以扩展.例如:protobuf,json,hessian等 指令类型:跟业务相关,例如:登录, ...
- vue-admin-template包下载地址
https://gitee.com/panjiachen/vue-admin-template/ https://github.com/PanJiaChen/vue-admin-template
- 【GiraKoo】Android Studio调试时，提示port无法打开
Android Studio调试时,提示port无法打开 现象描述 在Android Studio在进行调试时,无法正常运行.App闪退. IDE提示: Error running 'app': Un ...
- springboot 整合jdbc
在springboot底层无论关系型还是非关系型数据库都是用spring-data进行交互 新建: 通过spring initialer勾选重要依赖jdbc api和mysql driver: 源码分 ...
- es笔记七之聚合操作之桶聚合和矩阵聚合
本文首发于公众号:Hunter后端 原文链接:es笔记七之聚合操作之桶聚合和矩阵聚合 桶(bucket)聚合并不像指标(metric)聚合一样在字段上计算,而是会创建数据的桶,我们可以理解为分组,根据 ...