VUEトラバーサルの使用方法

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。

VUEトラバーサルの使用

Vue.jsは、配列とオブジェクトを反復するさまざまな方法を提供します。この記事では、最も一般的に使用される3つの方法、 v-for Directive、 v-bind Directive、および.mapメソッドを紹介します。

1。v v-forディレクティブ

v-forディレクティブは、各要素を配列またはオブジェクトで繰り返し、各要素のテンプレートをレンダリングするために使用されます。構文は次のとおりです。

 <code class="html"><template v-for="item in items"> {{ item }} </template></code>

上記の例はitemsという名前の配列を反復し、各要素のコンテンツをレンダリングします。

2。V v-bind命令

v-bindディレクティブを使用して、プロパティ値を動的にバインドできます。 v-forディレクティブを使用すると、配列またはオブジェクトと組み合わせて使用​​できるため、各要素の属性値を動的に設定できます。

 <code class="html"><template v-for="item in items"> <div :class="item.class"></div> </template></code>

上記の例は、 itemsアレイを通過し、各要素のclass属性、 item.classから取得した属性値を動的に設定します。

.mapメソッド

.mapメソッドは、配列内の各要素を新しい配列に変換します。 Vue.jsでは、 .mapメソッドは次の方法で呼び出すことができます。

 <code class="javascript">const newArray = this.items.map(item => item.value);</code>

上記の例は、 items配列を繰り返し、Element value newArrayのみを含む新しい配列を作成します。

以上がVUEトラバーサルの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。