当前位置:首页 >> 网络编程

vue v-model的用法解析

v-model的基本用法

一、本节说明

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

二、 怎么做

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

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

vue v-model的用法解析

三、 效果

vue v-model的用法解析

四、 深入

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

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

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

vue v-model的用法解析

v-model绑定radio和checkbox

一、本节说明

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

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

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

二、 怎么做

vue v-model的用法解析

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

三、 效果(动态图片)

vue v-model的用法解析

四、 深入

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

vue v-model的用法解析

浏览器效果:

vue v-model的用法解析

v-model绑定select

一、本节说明

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

二、 怎么做

vue v-model的用法解析

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

三、 效果(动态图)

vue v-model的用法解析

v-model的修饰符

一、本节说明

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

二、 怎么做

vue v-model的用法解析

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

三、 效果

vue v-model的用法解析

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

作者:字母哥博客

以上就是vue v-model的用法解析的详细内容,更多关于v-model的基本用法的资料请关注其它相关文章!