Vue.js 中v-model指令的修饰符【笔记】

v-model是用来将input或textarea与Vue实例的data数据进行双向绑定实现数据同步的效果，而我们在其基础上可以添加修饰符，来满足更多的使用场景。

v-model的修饰符有：

• .lazy：懒加载修饰符
• .number：将内容转换为number类型
• .trim：过滤首尾空格

各个修饰符的使用：转载文章

1、.lazy

v-model指令默认会在input事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。我们可以使用.lazy懒加载修饰符，让其只在change事件中再加载输入框中的数据。

html：

<div id="app">
    <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值">
    <p>输入框：{
    {content}}p>
div>

js：

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

效果：

2、.number

输入框输入的内容，即使是数字，默认也是string类型：

在此，我们使用.number修饰符，让其装换为number类型

html：

<div id="app2">
    <input type="number" v-model.number="content" placeholder="请输入" >
    <p>输入值：{
    {content}}，输入类型：{
    {typeof content}}p>
div>

js：

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

3、.trim

使用.trim修饰符可以自动过滤掉输入框的首尾空格。

html：

<div id="app3">
    <input type="text" v-model.trim="content" placeholder="请输入" value="初始值">
    <p>输入框：{
    {content}}p>
div>

js：

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