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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
JavaScript中的几种继承方法示例
Dec 06 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创建多级目录代码
2008/06/05 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
解析JavaScript中的标签语句
2013/06/19 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python+os根据文件名自动生成文本
2019/03/21 Python
详解python中eval函数的作用
2019/10/22 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
玩手机检讨书1000字
2014/10/20 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python