详细分析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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
BBS(php & mysql)完整版(七)
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python实现手机通讯录搜索功能
2018/02/22 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
计算机专业自我鉴定
2013/10/15 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
周年庆典主持词
2014/04/02 职场文书
技能比武方案
2014/05/21 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
初中学生操行评语
2014/12/26 职场文书
公司年会开场白
2015/06/01 职场文书
终止合同协议书范本
2016/03/22 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python