[Vue] 13.Vue中的双向绑定(2) ----指令修饰符

最新推荐文章于 2024-05-30 14:27:51 发布

weiweicn!

最新推荐文章于 2024-05-30 14:27:51 发布

阅读量108

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript vue

本文链接：https://blog.csdn.net/u014627255/article/details/125203141

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、指令修饰符

‘.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>

‘.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>

‘.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>