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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 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中创建图像并绘制文字的例子
2014/11/19 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
理解javascript对象继承
2016/04/17 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python3安装Scrapy的方法步骤
2017/11/23 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
一名女生的自荐信
2013/12/08 职场文书
高一地理教学反思
2014/01/18 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
工作过失检讨书
2014/02/23 职场文书
中国梦口号
2014/06/13 职场文书
解除劳动合同证明书
2014/09/26 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Python编程super应用场景及示例解析
2021/10/05 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技