说说|说说 Vue.js v-model 指令的修饰符说说Vue.jsv-model指令的修饰符

文章图片
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}}

【说说|说说 Vue.js v-model 指令的修饰符】js：

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

文章图片
以上示例 DEMO

说说|说说 Vue.js v-model 指令的修饰符