vue v-model的用法解析

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 v-model的用法解析的详细内容，更多关于v-model的基本用法的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue中v-model对select的绑定操作

    1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }

  • vue 父组件通过v-model接收子组件的值的代码

    具体代码如下所述: <template> <div> <el-select v-model="typeValue" placeholder="请选择包类型" @change='typeValChange' > <el-option v-for="item in typeData" :key="item.id" :label="item.label" :value=&

  • Vue循环中多个input绑定指定v-model实例

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框

  • vue.js 解决v-model让select默认选中不生效的问题

    笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下. 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题.js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面.并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的

  • 用vue.js组件模拟v-model指令实例方法

    1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le

  • vue3实现v-model原理详解

    vue3 源码正式放出来了,想必大家也都开始争先恐后的学习 vue3 的知识了.由于 vue3 已经不再支持 v-model 了,而使用 .sync 来代替,但是为了这篇文章可以帮助大家快速了解 vue 的双向绑定实现原理,部分使用了 vue2.x v-model 的实现原理 proxy 的基础知识,相信大家已经都很了解了,让我们一起来回顾一下吧 proxy 是对一个对象的代理,并返回一个已代理的对象,已代理的对象如果发生任何 set 跟 get 的方法都可以被捕获到,我们写一个简单的 :che

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • 详解vue v-model

    1. v-model原理 vue中v-model是一个语法糖,所谓的语法糖就是对其他基础功能的二次封装而产生的功能.简单点说,v-model本身就是父组件对子组件状态以及状态改变事件的封装.其实现原理上分为两个部分: 通过props设置子组件的状态 通过监听子组件发出的事件改变父组件的状态,从而影响子组件的props值 通过以上两个部分,实现了父组件的状态和子组件状态进行了绑定的效果. 1.1 demo v-model使用示例 <!DOCTYPE html> <html> <

  • vue中使用v-model完成组件间的通信

    以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">

  • Vue v-model组件封装(类似弹窗组件)

    v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on

  • vue中input的v-model清空操作

    问题来源 写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错.但是如果不修改父级无法更新值,也会带来开发的问题. 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.va

  • Vue 的 v-model用法实例

    Vue 框架早已经不是 MVVM(Mode-View-View-Model) 双向绑定了.早在 Vue 1.0 时代,Vue 在刚出世的时候的确是 MVVM 双向绑定.自 Vue 2.0 以来,Vue 就不再是双向绑定了,而是像 React 一样是单向绑定 MV(Model-View)了.但是,在 Vue 中仍保留了双向绑定的接口,v-model 就是. 1. 基本用法 <template> <div id="app"> <input v-model=&q

随机推荐