この記事は、コード例を通じて v-model を理解するのに役立ちます。一定の参考値があるので、困っている友達が参考になれば幸いです。
Vue v-model
は、input
と form ## を提供するディレクティブです。 # 2 つのコンポーネント間または 2 つのコンポーネント間の双方向データ バインディング。 [関連する推奨事項:
vue.js チュートリアル]
v-model の真の力を理解するには時間がかかります。
v-model のさまざまな使用例を説明し、独自のプロジェクトでの使用方法を学びます。
`v-model はテンプレート コードで使用できるディレクティブです。ディレクティブは、DOM をどのように処理するかを Vue に指示するテンプレート トークンです。
v-model の場合、
template の値と
data 属性の値が必要であることを Vue に伝えます。間の双方向データバインディングを作成します。
v-model を使用する一般的な使用例は、フォームに関連するいくつかの要素を設計する場合です。これを使用して、
input 要素が Vue インスタンス内のデータを変更できるようにすることができます。
<template> <div> <input type='text' v-model='value' /> <p> Value: {{ value }} </p> </div> </template> <script> export default { data() { return { value: 'Hello World' } } } </script>
input にコンテンツを入力すると、データ属性が変化していることがわかります
v-bind ディレクティブは通常、
v-model と切り替わります。 2 つの違いは、
v-model が双方向のデータ バインディングを提供することです。
input も変更され、
input が変更されるとデータも変更されることを意味します。
v-bind はデータを一方向にのみバインドします。
v-model と
v-bind のどちらを選択するかには注意が必要です。
v-modelの機能を変更できる2つの修飾子が用意されています。それぞれをこのように合計したり、接続したりすることもできます。
<input type='text' v-model.trim.lazy='value' />
v-model はすべての
input イベント ステータス (データ) で Vue インスタンスと一致します。属性) の同期。これには、集中力の獲得/喪失などが含まれます。
.lazy 修飾子は
v-model を変更し、変更イベントの後にのみ同期するようにします。これにより、v-model が Vue インスタンスとの同期を試みる回数が減り、場合によってはパフォーマンスが向上する可能性があります。
input は入力値を自動的に文字列に変更します。値が数値として扱われるようにする 1 つの方法は、
.number 修飾子を使用することです。
input が変更され、
parseFloat() が新しい値を解析できない場合、入力の最後の有効な値が返されます。
<input type='number' v-model.number='value' />
.trim 修飾子は値を返す前に先頭または末尾を削除します。空白。
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 v-model:name="value" />
update:name になります。
v-model の値を受け取ります。
export default { props: { modelValue: String, } }
update:modelValue を通じて新しい値を出力します。
上面介绍了如果在自定义组件中使用 v-model
,现在来看看一些v-model
指令更高级的用法。
v-model
并不局限于每个组件只能使用一个。要多次使用v-model
,我们只需要确保唯一命名,并在子组件中正确访问它。
为下面的组件添加第二个 v-model
,这里先命名为 lastName
:
<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中内置了一些修饰符,但这些远远不够,所以有时我们需要自定义自己的修饰符。
假设我们要创建一个修饰符,以删除输入的文本中的所有空格。 我们称之为no-whitespace
:
<custom-text-input v-model.no-whitespace='value' v-model:lastName='lastName' />
在组件内,我们可以使用 props 来捕获修改器。自定义修饰符的名称是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) }
运行,完美:
希望本文能教给大家一些有关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 サイトの他の関連記事を参照してください。