详细分析vue表单数据的绑定


Posted in Javascript onJuly 20, 2020

v-model的基本用法

一、本节说明

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

二、 怎么做

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

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

详细分析vue表单数据的绑定

三、 效果

详细分析vue表单数据的绑定

四、 深入

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

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

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

详细分析vue表单数据的绑定

v-model绑定radio和checkbox

一、本节说明

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

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

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

二、 怎么做

详细分析vue表单数据的绑定

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

三、 效果(动态图片)

详细分析vue表单数据的绑定

四、 深入

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

详细分析vue表单数据的绑定

浏览器效果:

详细分析vue表单数据的绑定

v-model绑定select

一、本节说明

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

二、 怎么做

详细分析vue表单数据的绑定

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

三、 效果(动态图)

详细分析vue表单数据的绑定

v-model的修饰符

一、本节说明

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

二、 怎么做

详细分析vue表单数据的绑定

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

三、 效果

详细分析vue表单数据的绑定

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

以上就是详细分析vue表单数据的绑定的详细内容,更多关于vue表单数据的绑定的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
深入理解node.js之path模块
May 03 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 #Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 #Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 #Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 #Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 #Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 #Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 #Javascript
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP入门速成教程
2007/03/19 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php实现源代码加密的方法
2015/07/11 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
laravel 数据验证规则详解
2019/10/23 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python写的服务监控程序实例
2015/01/31 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python提取页面内url列表的方法
2015/05/25 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python递归函数用法详解
2020/10/26 Python
公司晚会策划方案
2014/05/17 职场文书
质量标语大全
2014/06/12 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
大学生实习证明范本
2014/09/19 职场文书
辩论赛新闻稿
2015/07/17 职场文书