Through code examples, we will teach you about v-model (worth collecting)!

This article will help you understand v-model through code examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Vue v-model is a directive that provides input and form Two-way data binding between two components or between two components. [Related recommendations: vue.js tutorial]

This is a simple concept in Vue development, but the true power of v-model takes some time to understand .

This article mainly explains the different use cases of v-model and learn how to use it in your own projects.

What is v-model?

As mentioned just now, `v-model is a directive that we can use in template code. A directive is a template token that tells Vue how we want to handle the DOM.

In the case of v-model, it tells Vue that we want the value in the template and the value in the data attribute Create a two-way data binding between

A common use case for using v-model is when designing some elements related to forms. We can use this to enable the input element to modify data in the Vue instance.

<template>
  <div>
    <input 
      type=&#39;text&#39;
      v-model=&#39;value&#39;
    />
    <p> Value: {{ value }} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: &#39;Hello World&#39;  
    }
  }
}
</script>

When we enter content in input, we will see that our data attributes are changing

![Uploading...]()

What is the difference between v-model and v-bind? The

v-bind directive usually switches with v-model. The difference between the two is that v-model provides two-way data binding.

In our case, this means that if our data changes, our input will also change, and if our input changes, our The data will also change.

And v-bind only binds data in one way.

This is very useful when we want to create a clear one-way data flow in our application. However, care must be taken when choosing between v-model and v-bind.

Modifiers of v-model

Vue provides two modifiers that allow us to change the functionality of v-model. Each one can be added up like this or even connected together.

<input 
  type=&#39;text&#39;
  v-model.trim.lazy=&#39;value&#39;
/>

.lazy

By default, v-model matches the Vue instance on every input event Status (data attributes) synchronization. This includes gaining/losing focus etc. The

.lazy modifier modifies our v-model so it only syncs after the change event. This reduces the number of times v-model attempts to synchronize with the Vue instance, and in some cases, can improve performance.

.number

Normally, even if the input is a numeric type, input will automatically change the input value into a string. One way to ensure that our values ​​are treated as numbers is to use the .number modifier.

According to the Vue documentation, if input changes and parseFloat() cannot parse the new value, then the last valid value of the input will be returned.

<input 
  type=&#39;number&#39;
  v-model.number=&#39;value&#39;
/>

.trim

Similar to the trim method in most programming languages, the .trim modifier removes the beginning or end before returning the value Whitespace.

Using v-model in custom components

In Vue, there are two main steps for data binding:

• Passed from parent node Data

• Emit events from child instances to update parent instances

Using v-model on custom components works Let's pass a prop to handle an event with a directive.

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

<!-- IS THE SAME AS -->

<custom-text-input 
   :modelValue="value"
   @update:modelValue="value = $event"
/>

What exactly does this mean?

The default name for a value passed using v-model is modelValue. However, we can also pass a custom name like this.

<custom-text-input></custom-text-input>

Note: When we use a custom model name, the name of the emitted method will be update:name.

Using v-model in custom components

To use v-mode in custom components, you need to do two things Thing:

• Receives the value of v-model in props.

• When the corresponding value changes, an update event is issued

ok, first let’s declare:

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

Continue Next, bind the modelValue to the required element. When the value changes, we emit the new value through update:modelValue.

In this way, two-way binding can be achieved.

v-model 的使用技巧

上面介绍了如果在自定义组件中使用 v-model，现在来看看一些v-model指令更高级的用法。

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

v-model并不局限于每个组件只能使用一个。要多次使用v-model，我们只需要确保唯一命名，并在子组件中正确访问它。

为下面的组件添加第二个 v-model，这里先命名为 lastName:

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

<script>
import CustomTextInput from &#39;./CustomTextInput.vue&#39;

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

然后，我们内部的子组件:

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

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

运行后，可以看到两个 v-model 都可以正常工作：

自定义 v-model 的修饰符

Vue中内置了一些修饰符，但这些远远不够，所以有时我们需要自定义自己的修饰符。

假设我们要创建一个修饰符，以删除输入的文本中的所有空格。 我们称之为no-whitespace ：

<custom-text-input 
  v-model.no-whitespace=&#39;value&#39; 
  v-model:lastName=&#39;lastName&#39;
/>

在组件内，我们可以使用 props 来捕获修改器。自定义修饰符的名称是nameModifiers

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

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

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

在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)
}

运行，完美：

总结

希望本文能教给大家一些有关Vue v-model的新知识。

在它的基本用例(如表单和input数据)中，v-model是一个非常简单的概念。然而，当我们创建自定义组件并处理更复杂的数据时，我们可以释放v-model的真正威力。

原文地址：https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/

作者：Michael Thiessen

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Through code examples, we will teach you about v-model (worth collecting)!. For more information, please follow other related articles on the PHP Chinese website!