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脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
关于JS模块化的知识点分享
Oct 16 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python版名片管理系统
2018/11/30 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
临床医师专业个人自我评价
2014/01/08 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
网络编辑求职信
2014/04/30 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
个人买房协议书范本
2014/10/06 职场文书
英文邀请函
2015/02/02 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
JS setTimeout与setInterval的区别
2022/04/20 Javascript