DDR爱好者之家

vue v-model的用法解析
站长资源 2024/11/24 佚名
19 1538
DDR爱好者之家 Design By 杰米

v-model的基本用法

一、本节说明

前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。

二、 怎么做

我们通过v-model实现一个简单的需求

通过表单input绑定模型数据message，表单数据变化data.message也发生变化
然后通过Mustache表达式，将变化之后的message数据显示到视图页面上

vue v-model的用法解析

三、 效果

vue v-model的用法解析

四、 深入

v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：

  • v-bind绑定value属性
  • v-on监听表单元素的输入事件，并改变数据

所以，下面的两种写法实现的效果是一致的。

vue v-model的用法解析

v-model绑定radio和checkbox

一、本节说明

在绝大多数的表单操作中，我们不只要收集文本输入的数据，我们还可能用到单选和多选。通常，实现单选和多选有以下的方式：

  • 第一种：input标签type=radio实现单选和type=checkbox实现的多选
  • 第二种：select标签-option标签实现的单选与多选

这一节我们来讲解第一种方式实现的多选，及使用v-model指令数据绑定方法。

二、 怎么做

vue v-model的用法解析

  • 使用radio实现单选，v-model绑定的数据应该是同一个，这样实现单选选项之间的互斥
  • 使用checkbox实现多选，v-model绑定的数据应该是同一个，这样多选的数据才属于同一个数组

三、 效果（动态图片）

vue v-model的用法解析

四、 深入

怎样在单选或者多选选项显示，默认勾选一个或多个选项？只需要给定默认初始化数据即可

vue v-model的用法解析

浏览器效果：

vue v-model的用法解析

v-model绑定select

一、本节说明

上一节我们使用v-model指令，绑定input标签type=radio和type=checkbox，分别实现了单选和多选的视图向模型数据的绑定。这一节我们使用select标签和option标签，结合v-model实现单选和多选的视图向模型数据的绑定。

二、 怎么做

vue v-model的用法解析

  • v-model绑定模型数据mvp，实现单选效果
  • v-model绑定模型数据allDefensiveTeam，结合multiple属性实现多选效果
  • 多选选项的模型数据为数组类型
  • 可以为单选及多选设置默认值，即：默认的勾选项

三、 效果（动态图）

vue v-model的用法解析

v-model的修饰符

一、本节说明

本节我们介绍一下在使用v-model指令进行表单数据绑定的时候，常用的修饰符，修饰符会对指令功能起到补充和增强的作用。

二、 怎么做

vue v-model的用法解析

  • lazy修饰符：默认情况下，input输入会实时影响v-model绑定的数据。加上lazy修饰符，只有当输入框失去焦点会输入回车的时候，才会去改变v-model绑定的数据。
  • number修饰符：默认情况下，输入框中输入的无论是数字还是字母，都会被当做字符串处理。加上number修饰符，输入内容会被当做数值类型处理。
  • trim修饰符：可以自动去掉输入内容左右两边的空格

三、 效果

vue v-model的用法解析

  • 由上图可以看到，当第一个输入框失去焦点的时候，name：curry，才发生数据改变。
  • 输入年龄31，被当作数值类型处理（默认输入是当作字符串类型。因为初始值为null，所以显示是object类型）
  • 第三个输入框，输入内容前后都有空格，但是加上trim修饰符，就自动去掉了。

作者：字母哥博客

以上就是vue v-model的用法解析的详细内容，更多关于v-model的基本用法的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米