7.双向绑定指令 v-model
创始人
2024-06-02 19:17:19
0次
双向绑定指令可以让我们不用刻意去获取表单数据的时候，显示表单数据
目录
1 简单使用
2 v-model与v-bind:value
3 只有表单元素才能使用v-model
4 修饰符
4.1 .number
4.2 .trim
4.3 .lazy
4.4 修饰符可以同时使用
1 简单使用
打开后是这样的
当我们在input中输入的时候，“用户名是:”后面的文字会随之改变
下面的select也是一样
初始状态的内容也会被填入表单中
重新打开页面后是下面这样的
2 v-model与v-bind:value
修改v-model的表单会修改数据源，修改v-bind:value的表单不会修改数据源
打开后是这样的
当我们修改v-model的input的时候，会修改数据，数据会影响v-bind:value
但修改v-bind:value并不会影响数据
3 只有表单元素才能使用v-model
其他元素使用v-model，不会渲染出v-model指定的内容，并且会出warning
4 修饰符
有三个常用的修饰符
- .number 自动将用户的输入值转为数值类型
- .trim 自动删去用户输入的首位空白字符
- .lazy 表单失去焦点的时候才会更新数据，而不是每进行改动后就更新
我们每个都简单用一下
4.1 .number
我们先看没使用的情况
没使用的时候，username这个变量的类型是字符串
下面再看使用的情况
使用.number后，username这个变量类型为数字
4.2 .trim
没使用的情况
使用的情况
敲空格并不会影响数据，所以当input失去焦点的时候，数据又会重新渲染到input上，所以input失去焦点后也不会显示空格
4.3 .lazy
不使用的时候
每次在表单中输入后都会更新数据
使用的时候
表单失去焦点后，数据更新
4.4 修饰符可以同时使用
我现在按两次空格，再输入123
然后令input失去焦点
相关内容
热门资讯
恋夜视频安卓系统Uc,恋夜视频...
亲爱的读者，你是否曾在深夜时分，被手机屏幕上跳动的视频吸引？今天，就让我带你一探究竟，揭开恋夜视频安...
鸿蒙套娃安卓系统视频,融合与创...
你知道吗？最近科技圈可是炸开了锅，因为华为的新操作系统鸿蒙OS又有了新动作。这不，他们竟然把鸿蒙套娃...
xp系统连接安卓手机问题,实用...
你有没有遇到过这样的情况：你的电脑上还运行着那个经典的XP系统，而你的安卓手机却时不时地想要和你亲密...
压缩安卓系统储存空间,高效管理...
手机里的照片越来越多，游戏也越玩越上瘾，可这安卓系统的储存空间却越来越紧张，是不是感觉像是在挤牙膏？...
安卓手游转苹果系统教程,轻松实...
你是不是也和我一样，手头有一堆安卓手游，突然之间想换换口味，体验一下苹果系统的魅力呢？别急，今天就来...
安卓原生系统锁屏暗,安卓系统锁...
亲爱的手机控们，你是否曾为安卓手机锁屏时的暗模式而感到好奇？那种在夜晚或光线不足的环境中，屏幕自动调...
安卓系统表情包下载地址,安卓系...
你是不是也和我一样，对安卓系统的表情包爱不释手？那些搞笑的、可爱的、甚至是有点小调皮的表情，总能让我...
原生安卓系统声音bug,揭秘那...
你有没有遇到过这种情况？手机里突然传来一阵奇怪的声音，让你瞬间从美梦中惊醒，或者正在专心工作时被打扰...
水果收银机安卓系统,便捷高效的...
你有没有想过，在繁忙的超市里，那些摆满新鲜水果的摊位，背后竟然隐藏着一个小小的科技秘密？没错，就是那...
安卓系统变苹果界面了吗,苹果界...
最近手机界可是炸开了锅，不少安卓用户都在议论纷纷：“安卓系统变苹果界面了吗？”这事儿可真不简单，得好...
miui操作系统与安卓系统吗,...
亲爱的读者，你是否曾在手机上看到过MIUI操作系统和安卓系统这两个名字，好奇它们之间有什么区别？今天...
安卓系统怎么卡道具界面,探究原...
手机用久了，是不是感觉安卓系统越来越卡？尤其是那个道具界面，点开就慢吞吞的，真是让人头疼。别急，今天...
安卓系统红包加速器,畅享无阻新...
你有没有发现，现在用手机抢红包简直是一场速度与激情的较量？别急，别急，让我来给你揭秘一款神器——安卓...
安卓经典版系统更新时间,从首次...
你有没有发现，最近你的安卓手机又悄悄地变了个样？没错，就是那个陪伴我们多年的经典版系统，它又来更新啦...
安卓系统开发要多久,约需1-2...
你有没有想过，自己动手开发一个安卓应用，究竟需要多长时间呢？这可是个让人好奇的问题，毕竟安卓系统开发...
原生安卓系统手机壁纸图片,探索...
亲爱的手机控们，你是否曾为寻找一款独特的壁纸而烦恼？今天，就让我带你走进原生安卓系统手机壁纸的奇幻世...
bmw安卓互联系统,智能驾驶新...
你有没有发现，现在开车已经不仅仅是驾驶那么简单了？一辆好车，还得有个好“大脑”，这样才能让你的驾驶体...
安卓手机升级系统卡吗,安卓手机...
你有没有遇到过这种情况：安卓手机升级系统后，突然感觉手机像蜗牛一样慢吞吞的，心里那个急啊！今天，就让...
无线麦克风安卓系统,轻松实现无...
你有没有想过，在一场热闹的K歌派对或者重要的演讲场合，无线麦克风简直就是救星啊！想象你手握麦克风，自...
怎么重新定制安卓系统,打造专属...
你有没有想过，你的安卓手机其实可以变得独一无二，就像是你自己的小宇宙一样？没错，就是重新定制安卓系统...