13.v-model的修饰符

---

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg:"hello world",
            msg2:"",
            age:22,
            age2:22,
            info:'',
        },
        methods: {
             getVal(){
                console.log("年龄1"+typeof this.age);
            },
            getVal2(){
                console.log("年龄2"+typeof this.age);
            },
            getInfo(){
                console.log(this.info);
            }
        },
    });
</script>

1.lazy

<label for="msg">{{msg}}</label>
    <!--model指令默认在input事件触发更新-->
    <input type="text" v-model="msg" id="msg"><br>

    <label for="msg2">{{msg2}}</label>
    <!--lazy修饰的model指令会在change事件触发更新-->
    <input type="text" v-model.lazy="msg2" id="msg2"><br>

上面的hello world，同步；
下面的input框，只有input框脱离，才会更新

2.number

<label for="age">年龄</label>
    <input type="number" name="age" id="age" v-model="age">
    <button type="button" @click="getVal">获取年龄：</button><br>

    <!--number会把数字转换为number类型进行输出-->
    <label for="age2">年龄2</label>
    <input type="text" name="age2" id="age2" v-model.number="age2">
    <button type="button" @click="getVal2">获取年龄：</button><br>

1.当刷新页面的时候，年龄1的默认值为22，此时点击“获取年龄”：他的类型为number；当在他的input标签里面输入数字类型的值后，再点击他的按钮，他的类型会变成string类型。
2.v-model.number会将数字转换为number类型进行输出

3.trim

 <!--v-model.trim自动清除两边的空白符-->
    <label for="info">信息</label>
    <input type="text" name="info" id="info" v-model.trim="info">
    <button type="button" @click="getInfo">获取信息：</button>

使用v-model.trim后