详细分析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实现动态改变div宽度和高度
May 08 Javascript
js电话号码验证方法
Sep 28 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
微信小程序checkbox组件使用详解
Jan 31 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
js实现内置计时器
Dec 16 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
javaScript Array api梳理
Mar 31 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
建立文件交换功能的脚本(二)
2006/10/09 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python如何转换字符串大小写
2020/06/04 Python
python如何修改文件时间属性
2021/02/05 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
记帐员岗位责任制
2014/02/08 职场文书
整改报告怎么写
2014/11/06 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2019销售早会主持词
2019/06/27 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python