What is the use of the v-model instruction modifier in Vue.js
This article mainly introduces Vue.js v-model command modifier what to use related knowledge, detailed and easy to understand, simple and fast operation, has a certain reference value, I believe everyone read this Vue.js v-model command modifier what to use the article will be harvested, let's take a look at it.
1 .lazy
The v-model command loads the input box data by default in the input event (except for the process of typing pinyin in Chinese input method). We can use the.lazy load modifier to load the data in the input box only in the change event.
html：
Input box: {{content}}
js：
var app = new Vue({ el: '#app', data: { content: '' }});
Effect:
After using the.lazy load modifier, the content value is updated only if the input box loses focus or the Enter key is pressed.
2 .number
Input box input content, even if it is a number, the default is string type:
在此，我们可以使用 .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:{ } })关于"Vue.js中v-model指令修饰符有什么用"这篇文章的内容就介绍到这里，感谢各位的阅读!相信大家对"Vue.js中v-model指令修饰符有什么用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
