v-model的修饰符（.lazy、.number、.trim）

1 .lazy

默认情况下，v-model绑定的value和数据都是同步更新，一旦input中的value发生变化，对应的数据马上也发生变化。
.lazy修饰符，可以监测到input输入时只要按下回车，数据才会更新

        <div id="app">
            <input type="text" v-model.lazy="message"/>
            <h2>{{message}}</h2>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello'
                }
            })
        </script>

image.png

按下回车，数据才更新

image.png

2 .number

默认情况下，input输入框中无论输入的是数字还是字符串，都会被当做字符串处理，但是当我们想处理的是数字类型的数据时，.number修饰符就能把数据类型改成number
未加修饰符时，数字类型也被当做字符串

image.png

添加.number修饰符

        <div id="app">
            <input type="number" v-model.number="age"/>
            <h2>{{typeof age}}</h2>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    age: 18
                }
            })
        </script>

image.png

3 .trim

.trim修饰符会自动忽略input输入框中首尾的空格

未加修饰符时，首尾空格不会被消除

image.png

添加修饰符

        <div id="app">
            <input type="text" v-model.trim="name"/>
            <h2>{{name}}</h2>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    name: ''
                }
            })
        </script>

开头的空格被删除了

image.png