コード例を通じて、（収集する価値のある）v-model について説明します。

この記事は、コード例を通じて v-model を理解するのに役立ちます。一定の参考値があるので、困っている友達が参考になれば幸いです。

Vue v-model は、input と form ## を提供するディレクティブです。 # 2 つのコンポーネント間または 2 つのコンポーネント間の双方向データ バインディング。 [関連する推奨事項: vue.js チュートリアル]

これは Vue 開発における単純な概念ですが、

v-model の真の力を理解するには時間がかかります。

この記事では主に

v-model のさまざまな使用例を説明し、独自のプロジェクトでの使用方法を学びます。

v-modelとは何ですか?

先ほど述べたように、

`v-model はテンプレート コードで使用できるディレクティブです。ディレクティブは、DOM をどのように処理するかを Vue に指示するテンプレート トークンです。

v-model の場合、template の値と data 属性の値が必要であることを Vue に伝えます。間の双方向データバインディングを作成します。

v-model を使用する一般的な使用例は、フォームに関連するいくつかの要素を設計する場合です。これを使用して、input 要素が Vue インスタンス内のデータを変更できるようにすることができます。

<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>

input にコンテンツを入力すると、データ属性が変化していることがわかります

![アップロード中...]()

v-model と v-bind の違いは何ですか?

v-bind ディレクティブは通常、v-model と切り替わります。 2 つの違いは、v-model が双方向のデータ バインディングを提供することです。

この場合、これは、データが変更されると

input も変更され、input が変更されるとデータも変更されることを意味します。

そして

v-bind はデータを一方向にのみバインドします。

これは、アプリケーション内に明確な一方向のデータ フローを作成する場合に非常に便利です。ただし、

v-model と v-bind のどちらを選択するかには注意が必要です。

v-modelの修飾子

Vueには、

v-modelの機能を変更できる2つの修飾子が用意されています。それぞれをこのように合計したり、接続したりすることもできます。

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

.lazy

デフォルトでは、

v-model はすべての input イベント ステータス (データ) で Vue インスタンスと一致します。属性) の同期。これには、集中力の獲得/喪失などが含まれます。

.lazy 修飾子は v-model を変更し、変更イベントの後にのみ同期するようにします。これにより、v-model が Vue インスタンスとの同期を試みる回数が減り、場合によってはパフォーマンスが向上する可能性があります。

.number

通常、入力が数値型であっても、

input は入力値を自動的に文字列に変更します。値が数値として扱われるようにする 1 つの方法は、.number 修飾子を使用することです。

Vue ドキュメントによると、

input が変更され、parseFloat() が新しい値を解析できない場合、入力の最後の有効な値が返されます。

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

.trim

ほとんどのプログラミング言語の Trim メソッドと同様に、

.trim 修飾子は値を返す前に先頭または末尾を削除します。空白。

カスタム コンポーネントでの v-model の使用

Vue では、データ バインディングには主に 2 つの手順があります:

• 親ノード データから渡される

• 子インスタンスからイベントを発行して親インスタンスを更新する

カスタム コンポーネントで

v-model を使用すると機能します。 に prop を渡しましょう。ディレクティブを使用してイベントを処理します。

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

<!-- IS THE SAME AS -->

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

これは正確には何を意味しますか?

v-model を使用して渡される値のデフォルト名は modelValue です。 。ただし、このようにカスタム名を渡すこともできます。

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

注: カスタム モデル名を使用する場合、発行されるメソッドの名前は

update:name になります。

カスタム コンポーネントでの v-model の使用

カスタム コンポーネントで v-mode を使用するには、2 つのことを行う必要があります。 :

• props で

  v-model の値を受け取ります。

• 対応する値が変更されると、更新イベントが発行されます。

ok、最初に宣言しましょう:

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

Continue Next 、modelValue を必要な要素にバインドします。値が変更されると、

update:modelValue を通じて新しい値を出力します。

このようにして、双方向のバインディングを実現できます。

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

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

以上がコード例を通じて、（収集する価値のある）v-model について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。