十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
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:{ } } )
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。