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

v-model的基本用法

一、本节说明

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

二、 怎么做

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

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

三、 效果

四、 深入

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

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

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

v-model绑定radio和checkbox

一、本节说明

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

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

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

二、 怎么做

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

三、 效果（动态图片）

四、 深入

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

浏览器效果：

v-model绑定select

一、本节说明

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

二、 怎么做

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

三、 效果（动态图）

v-model的修饰符

一、本节说明

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

二、 怎么做

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

三、 效果

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

以上就是详细分析vue表单数据的绑定的详细内容，更多关于vue表单数据的绑定的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue自定v-model实现表单数据双向绑定问题

    vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍vue自定v-model实现表单数据双向绑定,具体内容如下所示: 子组件代码如下 v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price

  • VUE v-model表单数据双向绑定完整示例

    VUE v-model表单数据双向绑定完整示例

    本文实例讲述了VUE v-model表单数据双向绑定.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue v-model双向绑定</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></s

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业务较为常见,比如单选.多选.下拉选择.输入框等,用它们可以完成数据的录入.校验.提交等. Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上. 例如下面的例子: <div id="app"> <input type="text" v-mo

  • Vue表单控件数据绑定方法详解

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value.checked.selected特性的初始值.因为它会选择Vue实例数据来作为具体的值.应该通过JS组件的data选项中声明初始值 type:text <div id="example"> <input v-model="

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

    v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.

  • 详细分析vue响应式原理

    前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解整体流程 文章稍长,但大部分是代码实现,还请耐心观看.为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习. 主要成员 响应式原理中,Observe.Watcher.Dep这三个类是构成完整原理的主要成员. Observe,响

  • Vue 表单控件绑定的实现示例

    本文介绍了Vue 表单控件绑定的实现示例,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text&qu

  • Vue表单之v-model绑定下拉列表功能

    vue要绑定下拉列表会稍微有点不同. 因为下拉列表不是一个标签能搞掂的. 原生的html写法如下 <select> <option value="Vue.js">Vue.js</option> <option value="React.js">React.js</option> <option value="Angular.js">Angular.js</option&

  • vue表单数据交互提交演示教程

    欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://

  • Vue表单控件绑定图文详解

    Vue 表单控件绑定的实现,具体可以通过以下步骤操作来实现. 1.基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. 2.Checkbox 单个勾选框,逻辑值: 3.多个勾选框,绑定到同一个数组: 4.动态选项,用 v-for 渲染: 5.值绑定 对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑

  • 详细分析React 表单与事件

    本章节我们将讨论如何在 React 中使用表单. HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态. 在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新.但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新. 一个简单的实例 在实例中我们设置了输入框 input 值 value =

  • C++超详细分析顺序表

    C++超详细分析顺序表

    本次我们解剖顺序表将从以下三个结构: 1.静态顺序表和动态顺序表 2.顺序表实现增删查改等常见接口 3.顺序表相关OJ题练习 什么是顺序表 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构,一般情况下采用数组存 储.在数组上完成数据的增删查改. 兄弟们兄弟们,记得抠字眼啊,顺序表一定是连续的存储单元,并且是依次存储数据的!!!! 顺序表一般可以分为: 静态顺序表      动态顺序表 静态顺序表:使用定长数组存储,简单来说大小是固定的,数据个数也是固定的! 动态顺序表:使用动态开辟

随机推荐