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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 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
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python 实用工具状态机transitions
2020/11/21 Python
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
亿企通软件测试面试题
2012/04/10 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
大学自我鉴定
2013/12/20 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
村长贪污检举信
2014/04/04 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
投标授权委托书范文
2014/08/02 职场文书
代领毕业证委托书
2014/08/02 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
初中教师个人总结
2015/02/10 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers