Vue ​v-model相关知识总结

​v-model是Vue的一个指令,它提供了input和form数据之间或两个组件之间的双向数据绑定。

这在Vue开发中是一个简单的概念,但是v-model的真正威力需要一些时间才能理解。

到本教程结束时,你将了解v-model的所有不同用例,并学习如何在自己的项目中使用它。

准备好了吗?

我也是。让我们编写代码。

什么是v-model?

正如我们刚才讨论的,v-model是一个我们可以在模板代码中使用的指令。指令是一个模板令牌,它告诉Vue我们想要如何处理DOM。

v-model告诉Vue我们想要在模板中的值和数据属性中的值之间创建一个双向数据绑定。

使用v-model的一个常见用例是在设计form和input时。我们可以使用它使DOM input元素能够修改Vue实例中的数据。

让我们看一个在文本输入上使用v-model的简单示例。

<template>
 <div>
  <input
   type='text'
   v-model='value'
  />
  <p> Value: {{ value }} </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   value: 'Hello World'
  }
 }
}
</script>

当我们在文本输入中输入时,我们会看到我们的data属性发生了变化。

v-model和v-bind的区别?

v-bind指令通常会与v-model切换。

两者的区别在于v-model提供了双向数据绑定。

在我们的例子中,这意味着如果我们的数据改变了,我们的输入也会改变,如果我们的输入改变了,我们的数据也会改变。

然而,v-bind只以一种方式绑定数据。

当你在你的应用中创建一个清晰的单向数据流时,这是非常有用的。但是,在v-model和v-bind之间选择时必须小心。

v-model的修饰符

Vue提供了两个修饰符,允许我们更改v-model的功能。

每一个都可以像这样加起来,甚至可以连接在一起。

<input
 type='text'
 v-model.trim.lazy='value'
/>

.lazy

默认情况下,v-model在每个输入事件上与Vue实例(数据属性)的状态同步。这包括得到,失去焦点等等。

lazy修饰符修改了我们的v-model,所以它只在更改事件之后同步。

这减少了v-model试图与Vue实例同步的次数——在某些情况下,还可以提高性能。

.number

通常,我们的输入将自动将输入转为字符串—即使我们将输入是数字。

确保将值作为数字处理的一种方法是使用. number修饰符。

根据Vue文档,如果输入发生变化,并且parseFloat()无法解析新值,那么将返回输入的最后一个有效值。

<input
 type='number'
 v-model.number='value'
/>

.trim

与大多数编程语言中的trim方法类似,.trim修饰符在返回值之前删除开头或结尾的空白。

在自定义组件中使用v-model

好了,现在我们已经了解了form/input内部的v-model的基本知识,让我们看看v-model的一个有趣用法——在组件之间创建双向数据绑定。

在Vue中,数据绑定有两个主要步骤:

从父节点传递数据

从子组件发出事件以更新父组件

在自定义组件上使用v-model可以让我们传递一个prop,用一个指令来处理一个事件。

<custom-text-input v-model="value" />
<!-- IS THE SAME AS -->
<custom-text-input
  :modelValue="value"
  @update:modelValue="value = $event"
/>

好吧,这到底是什么意思?

让我们继续使用v-model表单的例子,并使用名为CustomTextInput.vue的自定义文本输入。

使用v-model传递的值的默认名称是modelValue——我们将在示例中使用这个名称。

但是,我们可以像这样传递一个定制的模型名称。

<custom-text-input v-model:name="value" />

注意:当我们使用自定义模型名称时,所发出方法的名称将被更新:name

下面是来自Vue文档的一张图来总结它。

使用自定义组件中的v-model

我们已经设置好了父组件,所以让我们从子组件访问它。

在CustomTextInput.vue中,我们必须做两件事:

  • 接受我们的v-model值作为prop
  • 当我们的输入发生变化时,触发一个更新事件

好的——让我们首先在脚本中声明它是prop。

export default {
 props: {
  modelValue: String,
 }
}

接下来,让我们创建我们的模板,将值设置为modelValue prop,只要有输入事件,我们就通过update:modelValue发出新值。

<template>
 <div>
  <label> First Name </label>
  <input
   type='text'
   placeholder='Input'
   :value='modelValue'
   @input='$emit("update:modelValue", $event.target.value)'
  />
 </div>
</template>

使用v-model

好吧!

我们已经介绍了一个使用v-model在两个组件之间绑定数据的基本示例。

让我们看一些使用v-model指令的更高级的方法。

对一个组件多次使用v-model

v-model并不局限于每个组件只能使用一次。

要多次使用v-model,我们只需要确保为每个prop唯一命名,并在子组件中正确访问它。

让我们在lastName中添加第二个v-model。

在我们的父组件中:

<template>
 <div>
  <custom-text-input
   v-model='value'
   v-model:lastName='lastName'
  />
  <p> Value: {{ value }} </p>
  <p> Last Name: {{ lastName }} </p>
 </div>
</template>

<script>
import CustomTextInput from './CustomTextInput.vue'

export default {
 components: {
  CustomTextInput,
 },
 data() {
  return {
   value: 'Matt',
   lastName: 'Maribojoc'
  }
 }
}
</script>

然后,在子组件内部:

<template>
 <div>
  <label> First Name </label>
  <input
   type='text'
   :value='modelValue'
   placeholder='Input'
   @input='$emit("update:modelValue", $event.target.value)'
  />
  <label> Last Name </label>
  <input
   type='text'
   :value='lastName'
   placeholder='Input'
   @input='$emit("update:lastName", $event.target.value)'
  />
 </div>
</template>

<script>
export default {
 props: {
  lastName: String,
  modelValue: String,
 }
}
</script>

V-model的自定义修饰符

正如我们所讨论的,Vue中内置了一些修饰符。但总有一天,我们会想要添加我们自己的。

假设我们想要创建一个修饰符来删除输入中的所有空格。我们称之为无空格。

<custom-text-input
 v-model.no-whitespace='value'
 v-model:lastName='lastName'
/>

在我们的输入组件中,我们可以使用prop来捕获修饰符。自定义修饰符的名称是nameModifiers。

props: {
 lastName: String,
 modelValue: String,
 modelModifiers: {
  default: () => ({})
 }
}

好的,我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue,它将接受正在编辑的属性和事件对象的名称。

<label> First Name </label>
<input
   type='text'
   :value='modelValue'
   placeholder='Input'
   @input='emitValue("modelValue", $event)'
/>

在emitValue方法中,在调用$emit之前,我们要检查修饰符。如果no-whitespace修饰符为true,则可以在将其发送给父对象之前修改该值。

emitValue(propName, evt) {
 let val = evt.target.value
 if (this.modelModifiers['no-whitespace']) {
  val = val.replace(/\s/g, '')
 }
 this.$emit(`update:${propName}`, val)
}

结论

希望你知道了一些有关v-model的新知识。

在它的基本用例(如表单和输入数据)中,v-model是一个非常简单的概念。然而,当我们开始创建自定义组件并处理更复杂的数据时,我们可以真正了解v-model。

以上就是Vue ​v-model相关知识总结的详细内容,更多关于Vue ​v-model的资料请关注我们其它相关文章!

(0)

相关推荐

  • 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.js自定义组件实现v-model双向数据绑定的示例代码

    我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

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

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

  • 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组件封装(类似弹窗组件)

    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中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的用法解析

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

  • 详解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 框架早已经不是 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

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

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

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

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

随机推荐