Vue.js中v-model指令修饰符有什么用

这篇文章主要介绍了Vue.js中v-model指令修饰符有什么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue.js中v-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}}

js：

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

以上示例 DEMO

PS：下面通过代码看下v-model指令及其修饰符

    
  
        
{{name}}
  
  
        
{{name}}
  
  
        
{{name}}
  

var app = new Vue(  {    el:"#app",    data:{      name:""    },    methods:{    }  })

关于"Vue.js中v-model指令修饰符有什么用"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"Vue.js中v-model指令修饰符有什么用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。