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>这个将不会改 ...
随机推荐
- 访问nginx报错502日志：failed (13: Permission denied) while connecting to upstream
1.错误问题 nginx启动成功,但是访问nginx报错502.检查后台项目,使用IP+端口可以正常访问项目的,这说明项目启动成功了.那就是nginx的问题.检查了nginx.conf文件发现配置的反 ...
- Linux驱动开发环境-Kernel源码安装
开如学习LDD3这本书. 我是在Fedora18上学习的,但我安装的这个版本,/usr/src/下面没有相应的源代码. 自己从KERNEL网站下载相应版本源码(安装驱动有问题) 于是从kernel的网 ...
- 【Python基础】字典的基本使用
字典是由一系列键值对组成的无序集合.每个键值对包含一个键和一个对应的值.键必须是不可变的,如字符串.数字或元组.值可以是任意类型的对象.字典可以使用花括号({})或者内置函数dict()来创建. di ...
- Hardhat 开发框架 - Solidity开发教程连载
Decert.me 要连载教程了, <Solidity 开发教程> 力求系统.深入的介绍 Solidity 开发, 同时这是一套交互式教程,你可以实时的修改教程里的合约代码并运行. 本教程 ...
- 2023-03-11：给定一个N*M的二维矩阵，只由字符‘O‘、‘X‘、‘S‘、‘E‘组成， ‘O‘表示这个地方是可通行的平地， ‘X‘表示这个地方是不可通行的障碍， ‘S‘表示这个地方有一个士兵，全
2023-03-11:给定一个N*M的二维矩阵,只由字符'O'.'X'.'S'.'E'组成, 'O'表示这个地方是可通行的平地, 'X'表示这个地方是不可通行的障碍, 'S'表示这个地方有一个士兵,全 ...
- 2021-05-31：怎么判断n个数俩俩互质？比如7,8,9任意两个数最大公约数是1，所以7,8,9两两互质。比如8,9
2021-05-31:怎么判断n个数俩俩互质?比如7,8,9任意两个数最大公约数是1,所以7,8,9两两互质.比如8,9,10不是两两互质,因为8和10的最大公约数是2. 福大大 答案2021-05- ...
- Django4全栈进阶之路11 view视图
在 Django 4 中,视图(View)是一个处理请求并返回响应的 Python 函数或类的组合.视图函数通常是处理请求的主要逻辑,因此它是 Django Web 应用程序的重要组成部分. 视图函数 ...
- Vue Element-ui 之 el-table自动滚动
首先是 div结构布局 <div id="scrollId">//对el-table盒子设置 id 属性 <div style="height: 100 ...
- 基于Expression Lambda表达式树的通用复杂动态查询构建器——《构思篇一》
在上一篇中构思了把查询子句描述出来的数据结构,那么能否用代码将其表达出来,如何表达呢? 再次回顾考察,看下面的查询子句: Id>1 and Id<10 如上所示,有两个独立的条件分别为Id ...
- 4、数据库：MySQL部署 - 系统部署系列文章
MySQL数据库在其它博文中有介绍,包括学习规划系列.今天就讲讲MySQL的部署事情. 一.先下载MySQL数据库: 到下面这个网址去下载数据库,这里下载的社区版: https://dev.mysql ...