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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
解决vue 退出动画无效的问题
Aug 09 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
js 控制图片大小核心讲解
2013/10/09 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python实现批量改文件名称的方法
2015/05/25 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Django视图扩展类知识点详解
2019/10/25 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
导致python中import错误的原因是什么
2020/07/01 Python
python实现学生信息管理系统源码
2021/02/22 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
国际贸易个人求职信范文
2014/01/04 职场文书
打架检讨书500字
2014/01/29 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
高考励志标语
2014/06/05 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
农村党员对照检查材料
2014/09/24 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python