Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明


Posted in Javascript onAugust 05, 2020

如下所示:

.lazy

并不是实时改变,而是在失去焦点或者按回车时才会更新

.number

将输入转换成Number类型

.trim

可以自动过滤输入首尾的空格

补充知识:vue通过v-model,@input, @v-model.lazy几种输入框数据更新方式的区别

在使用v-model时,如果用中文输入法输入中文,一般在没有选定词组前,也就在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新。如果希望总是实时更新,可以用@input来代替v-model.

<div id="app">
  <input type="text" v-model.lazy="message" placeholder="请输入">
  <p>输入的内容是:{{ message }}</p>
  <input type="text" @input="handleInput" placeholder="请输入">
  <p>输入的内容是:{{ message1 }}</p>
 </div>

 <script type="text/javascript">
  var app = new Vue({
   el: '#app',
   data: {
    message:'',
    message1:''
   },methods:{
    handleInput:function(e){
     this.message1 = e.target.value //原生的DOM事件
    }
   }
  })
 </script>

而v-model也有修饰符,.lazy会转变为在change事件中同步,这时。message并不是实时改变,而是在失去焦点和按回车时才会更新

以上这篇Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
javascript下查找父节点的简单方法
Aug 13 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
详解用node编写自己的cli工具
May 23 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 #Javascript
vue 限制input只能输入正数的操作
Aug 05 #Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
js实现简单选项卡制作
Aug 05 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
ThinkPHP分页实例
2014/10/15 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python中图像通道分离与合并实例
2020/01/17 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Java servlet面试题
2012/03/04 面试题
师德个人剖析材料
2014/02/02 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
读群众路线的心得体会
2014/09/03 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
Redis基本数据类型String常用操作命令
2022/06/01 Redis