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失去焦点
相关内容
热门资讯
安卓系统垃圾手动清理,手动优化...
手机里的安卓系统是不是越来越慢了？是不是觉得垃圾文件越来越多，清理起来麻烦又费时？别急，今天就来给你...
安卓怎么转成苹果系统,跨平台迁...
你是不是也和我一样，手里拿着一台安卓手机，突然之间对苹果的生态系统产生了浓厚的兴趣？想要体验一下那个...
安卓手机升级系统蓝屏,安卓手机...
你有没有遇到过这种情况？手机升级系统后，屏幕突然变成了蓝屏，心里那个慌啊！别急，今天就来和你聊聊安卓...
安卓系统变ios系统教程视频,...
你是不是也和我一样，对手机系统转换充满了好奇？想要从安卓系统切换到iOS系统，但又觉得操作复杂，不知...
哪种汽车是安卓系统,探索安卓系...
你有没有想过，在我们这个智能化的时代，汽车竟然也能装上安卓系统呢？没错，你没听错，就是那个我们日常使...
完美返利系统下载安卓,轻松赚取...
你有没有听说过那个超级给力的“完美返利系统”呀？最近在朋友圈里可是火得一塌糊涂呢！今天，我就要来给你...
安卓系统传文件app,轻松实现...
你是不是也和我一样，手机里存了超多好用的安卓系统传文件app？今天就来聊聊这些小宝贝，看看它们是如何...
车载导航安卓系统大全,全面解析...
你有没有想过，开车出门的时候，如果没有了导航，那可真是寸步难行啊！现在，车载导航安卓系统可是越来越流...
部落冲突关联安卓系统,安卓系统...
亲爱的玩家们，你是否曾在《部落冲突》的世界里，挥舞着你的战旗，与成千上万的玩家并肩作战？今天，就让我...
安卓手机系统好评推荐,这些热门...
你有没有发现，现在手机市场上安卓手机真的是越来越受欢迎了呢？这不，最近我可是深入研究了各种安卓手机系...
诺基亚925刷安卓系统,深度解...
你手中的诺基亚925是不是已经有点儿老气横秋了？别急，今天就来给你来点新鲜的！咱们聊聊如何给这款经典...
安卓系统应用这么关闭,安卓应用...
手机里的安卓系统应用这么多，有时候用完一个就想赶紧关闭，免得占用太多内存。但是，你知道怎么高效地关闭...
手机wp系统怎么刷安卓系统,轻...
你有没有想过，你的手机WP系统突然变得有点儿老气横秋，想要给它来个焕然一新的变身呢？没错，就是刷上安...
安卓原生系统进程锁,守护系统稳...
你知道吗？在安卓手机的世界里，有一个神秘的守护者，它就是安卓原生系统进程锁。今天，就让我带你一探究竟...
删除安卓系统的缓存,释放手机空...
手机用久了是不是感觉越来越卡？别急，今天就来教你怎么给安卓手机来个大扫除，把那些该死的缓存通通清理掉...
安卓系统的所有游戏,尽享千款精...
你有没有发现，手机里的游戏越来越丰富了呢？尤其是安卓系统，简直就是游戏爱好者的天堂！今天，就让我带你...
安卓系统流畅度测评,深度解析各...
你有没有发现，手机用久了，有时候就像老牛拉车一样，慢吞吞的，让人心里直发慌？这不，最近我闲来无事，就...
安卓4.4系统升6.0,系统变...
你有没有发现，你的安卓手机最近有点儿“老态龙钟”了呢？别急，别急，让我来给你支个招儿，让你的安卓4....
安卓点餐系统文档,功能解析与操...
你有没有想过，点餐这件小事，竟然也能变得如此高大上？没错，就是那个我们每天都要打交道，却又常常忽略的...
途昂装安卓系统,智能驾驶体验再...
哇，你有没有想过，你的途昂汽车也能装上安卓系统？是的，你没听错，就是那个我们日常使用的安卓系统！想象...