详细分析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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
js实现上传图片到服务器
Apr 11 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
谈谈Python中的while循环语句
2019/03/10 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
浅谈Python 参数与变量
2020/06/20 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
广播节目策划方案
2014/05/23 职场文书
2014年科协工作总结
2014/12/09 职场文书
2014年英语工作总结
2014/12/20 职场文书
中班教师个人总结
2015/02/05 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
Python开发五子棋小游戏
2022/05/02 Python
MySQL transaction事务安全示例讲解
2022/06/21 MySQL