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>这个将不会改 ...
随机推荐
- Python分支结构之if语句
程序结构 程序三种结构 顺序 循环 分支 分支结构 分支结构基本语法 if 条件表达式: 语句1 语句2 语句3 ...... 条件表达式就是计算结果必须为布尔值的表达式 表达式后面的冒号不能少 注意 ...
- unity运行时调试log控制台
最近从GameFramework把里头觉得很赞的Debugger调试器单独抽离了出来,方便嵌入任意项目工程进行调试. 查看log信息,允许点击详情并复制到粘贴板,允许锁定log滚动面板 支持开启log ...
- ChatGPT 中文指令指南，教会你如何使用chatgpt实现中文你想要的答案
ChatGPT 中文指令指南,教会你如何使用chatgpt实现中文你想要的答案 1.学习英语--替代词典 App 场景 例子 Prompts 解释中文英文意思,并解释单词的词根词缀.可以替代词典. 告 ...
- 探讨AIGC的崛起历程，浅析其背后技术发展
摘要:本文主要讨论了AIGC(人工智能生成内容)的发展历程.现状.应用,浅析其背后技术发展.与华为云的联系,以及面临的挑战和展望. 本文分享自华为云社区<AIGC:人工智能生成内容的崛起与未来展 ...
- 基于python爬虫技术对于淘宝的数据分析的设计与实现
本篇仅在于交流学习 本文主要介绍通过 selenium 模块和 requests 模块,同时让机器模拟人在浏览器上的行为,登录指定的网站,通过网站内部的搜索引擎来搜索自己相应的信息,从而获取相应关键字 ...
- 2023-03-05：ffmpeg推送本地视频至lal流媒体服务器（以RTMP为例），请用go语言编写。
2023-03-05:ffmpeg推送本地视频至lal流媒体服务器(以RTMP为例),请用go语言编写. 答案2023-03-05: 使用 github.com/moonfdd/ffmpeg-go 库 ...
- 2022-11-10：写一个 bash 脚本以统计一个文本文件 words.txt 中每个单词出现的频率。 为了简单起见，你可以假设： words.txt只包括小写字母和 ‘ ‘ 。 每个单词只由小写
2022-11-10:写一个 bash 脚本以统计一个文本文件 words.txt 中每个单词出现的频率. 为了简单起见,你可以假设: words.txt只包括小写字母和 ' ' . 每个单词只由小写 ...
- Row size too large. The maximum row size for the used table type, not counting BLOBs, is 65535.
问题描述 新建表或者修改表varchar字段长度的时候,出现这个错误 Row size too large. The maximum row size for the used table type, ...
- CogSci 2017-Learning to reinforcement learn
Key 元学习系统(监督+从属)扩展于RL设置 LSTM用强化学习算法进行训练,可以使agent获得一定的学习适应能力 解决的主要问题 DRL受限于特定的领域 DRL训练需要大量的数据 作者参考了Ho ...
- Python潮流周刊#2：Rust 让 Python 再次伟大
这里记录每周值得分享的 Python 及通用技术内容,部分为英文,已在小标题注明.(本期标题取自其中一则分享,不代表全部内容都是该主题,特此声明.) 文章&教程 1.Python修饰器的函数式 ...