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>这个将不会改 ...
随机推荐
- JUC中常见的集合
Map: HashMap ===> ConcurrentHashMap List: ArrayList ===> CopyOnWriteArrayList Set: HashSet === ...
- 数据结构(DataStructure)-01
数据结构-01 **数据结构与算法** **算法概述** **时间复杂度概述** **时间复杂度 - 计算规则** **数据结构概述** **抽象数据类型** **线性表 - 顺序表** **线性表 ...
- 数据结构哈夫曼树（C语言版）
文章目录 一. 问题 需求分析 代码分析 结构体定义使用 建立哈夫曼树,首先需要找到两个权值最小的两个叶子结点,然后建树 哈夫曼编码(我采用的是从叶子结点-->根节点,所以实际是反过来的) 使用 ...
- 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程
准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器. 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 , ...
- 百度飞桨(PaddlePaddle) - PaddleOCR 文字识别简单使用
百度飞桨(PaddlePaddle)安装 OCR 文字检测(Differentiable Binarization --- DB) OCR的技术路线 PaddleHub 预训练模型的网络结构是 DB ...
- vue全家桶进阶之路35：Vue3 传递参数query和params
在 Vue.js 3.x 中,可以通过路由的 params 和 query 属性来传递参数. 通过 params 传递参数 我们可以在路由跳转时通过 params 传递参数.具体方法如下: // 在组 ...
- Qt+QtWebApp开发笔记（一）：QtWebApp介绍、下载和搭建基础封装http轻量级服务器Demo
前言 在arm上做了Qt的应用程序,为了在局域网实现web页的访问方式来配置arm上Qt的程序,局域网轻量级http服务器是很好的实现方式之一,有机会做国产麒麟上Qt的http服务器,正好接触到了 ...
- Java的CompletableFuture，Java的多线程开发
三.Java8的CompletableFuture,Java的多线程开发 1.CompletableFuture的常用方法 以后用到再加 runAsync() :开启异步(创建线程执行任务),无返回值 ...
- 500行代码手写docker-实现硬件资源限制cgroups
(5)500行代码手写docker-实现硬件资源限制cgroups 本系列教程主要是为了弄清楚容器化的原理,纸上得来终觉浅,绝知此事要躬行,理论始终不及动手实践来的深刻,所以这个系列会用go语言实现一 ...
- kafka消费者那些事儿
前言 消息的消费一般有两种模式,推模式和拉模式.推模式是服务端主动将消息推送给消费者,而拉模式是消费者主动向服务端发起请求来拉取消息.kakfa采用的是拉模式,这样可以很好的控制消费速率.那么kafk ...