详细分析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 相关文章推荐
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php中rename函数用法分析
2014/11/15 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP进程同步代码实例
2015/02/12 PHP
php获取linux命令结果的实例
2017/03/13 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
关于抽烟的检讨书
2014/02/25 职场文书
商场周年庆活动方案
2014/08/19 职场文书
销售人才自我评价范文
2014/09/27 职场文书
单位委托书
2014/10/15 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书