从品牌网站建设到网络营销策划,从策略到执行的一站式服务
Vue.js中 v-model 指令修饰符的作用是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
安新ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!1 .lazy
v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。
html:
输入框:{{content}}
js:
var app = new Vue({ el: '#app', data: { content: '' } });
效果:
使用 .lazy 懒加载修饰符之后,只有在输入框失去焦点或者按回车键时才会更新 content 值。
2 .number
输入框输入的内容,即使是数字,默认也是 string 类型:
在此,我们可以使用 .number 修饰符让其转换为 number 类型——
html:
输入值:{{content}},输入类型:{{typeof content}}
js:
var app2 = new Vue({ el: '#app2', data: { content: 1 } });
效果:
3 .trim
使用 ·.trim` 修饰符可以自动过滤掉输入框的首尾空格。
html:
输入框:{{content}}
js:
var app3 = new Vue({ el: '#app3', data: { content: '' } });
以上示例 DEMO
PS:下面通过代码看下v-model指令及其修饰符
Title {{name}}
{{name}}
{{name}}
var app = new Vue( { el:"#app", data:{ name:"" }, methods:{ } } )
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图