v-model的修饰符

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43307658/article/details/89738585

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机

1 v-model.lazy

使用.lazy修饰符,会转变为在change事件中同步,简单粗暴的讲就是,此时数据并不会像我们以前见到的v-model那样实时更新数据,而是在失去焦点或者会车时更新,见下面示例代码

<div id = 'app'>
    <input type = 'text' v-model.lazy = 'mes'>
    <p>{{ mes }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            mes: ''
        }
    })
</script>

2 v-model.number

看这个之前,需要明确的是,我们输入的数字,到底是Number类型还是String类型,实际上,虽然输入的是数字,但实际上是String,那么.number修饰符就可以将输入的内容转化为Number类型

<div id = 'app'>
    <input type = 'number' v-model.number = 'mes'>
    <p>{{ mes }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            mes: 123456
        }
    })
</script>

3 v-model.trim

自动过滤输入的首尾空格

<div id = 'app'>
    <input type = 'text' v-model.trim = 'mes'>
    <p>{{ mes }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            mes: '              123456                  '
        }
    })
</script>
展开阅读全文

v-model双向绑定

06-21

<p>n <span style="color:#333333;"><span style="font-size:16px;"><strong>【课程介绍】</strong></span></span>n</p>n<p>n <span style="color:#333333;"><span style="font-size:16px;">课程目标:从零基础到学会实战开发vue项目</span><br /><span style="font-size:16px;">适用人群:会基础HTML,CSS,JS</span><br /><span style="font-size:16px;">接口后台:python</span><br /><span style="font-size:16px;">课程特色:提供项目接口,用python开发,提供短信验证码接口,接口和文档永久有效,学生的项目上线后可直接访问,可当做面试作品和大学生毕业设计</span></span><span style="color:#333333;"> </span><span style="font-size:16px;"></span>n</p>n<p>n <span style="font-size:16px;"><br /></span>n</p>n<p>n <span style="font-size:16px;"><strong>【课程收益】</strong></span>n</p>n<p>n <span style="font-size:16px;">1.从零基础掌握vue开发</span>n</p>n<p>n <span style="font-size:16px;">2.掌握vue组件思维<br /></span>n</p>n<p>n <span style="font-size:16px;">3.了解什么是前后端分离开发</span>n</p>n<p>n <span style="font-size:16px;">4.学会请求数据</span>n</p>n<p>n <span style="font-size:16px;">5.学会vue高级功能使用</span>n</p>n<p>n <span style="font-size:16px;">6.做出一个完整的上线项目</span>n</p>n<p>n <span style="font-size:16px;">7.课程可当做大学生毕业设计</span>n</p>n<p>n <span style="font-size:16px;">8.课程可当做面试作品</span>n</p>

没有更多推荐了,返回首页