Vue.js中 v-model 指令的修饰符详解


Posted in Javascript onDecember 03, 2018

1 .lazy

v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。

html:

<div id="app">
  <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值">
  <p>输入框:{{content}}</p>
</div>

js:

var app = new Vue({
  el: '#app',
  data: {
    content: ''
  }
});

效果:

Vue.js中 v-model 指令的修饰符详解

使用 .lazy 懒加载修饰符之后,只有在输入框失去焦点或者按回车键时才会更新 content 值。

2 .number

输入框输入的内容,即使是数字,默认也是 string 类型:

Vue.js中 v-model 指令的修饰符详解

在此,我们可以使用 .number 修饰符让其转换为 number 类型——

html:

<div id="app2">
  <input type="number" v-model.number="content" placeholder="请输入" >
  <p>输入值:{{content}},输入类型:{{typeof content}}</p>
</div>

js:

var app2 = new Vue({
  el: '#app2',
  data: {
    content: 1
  }
});

效果:

Vue.js中 v-model 指令的修饰符详解

3 .trim

使用 ·.trim` 修饰符可以自动过滤掉输入框的首尾空格。

html:

<div id="app3">
  <input type="text" v-model.trim="content" placeholder="请输入" value="初始值">
  <p>输入框:{{content}}</p>
</div>

js:

var app3 = new Vue({
  el: '#app3',
  data: {
    content: ''
  }
});

Vue.js中 v-model 指令的修饰符详解

以上示例 DEMO

PS:下面通过代码看下v-model指令及其修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div>
    <input type="text" v-model="name">
    <pre><h2>{{name}}</h2></pre>
  </div>
  <div>
    <input type="text" v-model.lazy="name">
    <pre><h2>{{name}}</h2></pre>
  </div>
  <div>
    <input type="text" v-model.trim="name">
    <pre><h2>{{name}}</h2></pre>
  </div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
var app = new Vue(
  {
    el:"#app",
    data:{
      name:""
    },
    methods:{

    }
  }
)

总结

以上所述是小编给大家介绍的Vue.js中 v-model 指令的修饰符详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
浅谈ng-zorro使用心得
Dec 03 #Javascript
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
You might like
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python版学生管理系统
2018/01/10 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
关于Keras Dense层整理
2020/05/21 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
检察官就职演讲稿
2014/01/13 职场文书
教师学期个人总结
2015/02/11 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
小学生读书笔记范文
2015/06/30 职场文书
生日祝酒词大全
2015/08/10 职场文书
小学数学教学反思范文
2016/02/16 职场文书