一、指令修饰符

1. ‘.lazy’: 失焦触发事件

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello'
                }
            },
            template: `
                <div>
                    {{message}}
                    <input v-model.lazy="message" />
                </div>
                `,
        });
        const vm = app.mount('#root')
    </script> 

2. ‘.number’ 修饰符：给数据转换成number存储

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: '123'
                }
            },
            template: `
                <div>
                    {{typeof message}}
                    <input v-model.number="message" type="number" />
                </div>
                `
        });
        const vm = app.mount('#root')
    </script>

3. ‘.trim修饰符’：去掉前后的空格

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello'
                }
            },
            template: `
                <div>
                    {{message}}
                    <input v-model.trim="message"/>
                </div>
                `
        });
        const vm = app.mount('#root')
    </script>