vue で v-for を使用してオブジェクトをトラバースする方法

オブジェクトを走査する Vue の v-for ディレクティブは、v-for="item in object" 構文を通じて実装されます。これにより、オブジェクトのプロパティを走査し、テンプレートのコンテンツをレンダリングできるようになります。具体的な使用法は次のとおりです。オブジェクト内の各値を表す、走査された変数名項目を v-for に指定します。 person[item] を使用してオブジェクトのプロパティにアクセスします。ここで item はプロパティ名です。 v-for ディレクティブは、列挙可能なプロパティではなく、オブジェクトの列挙可能なプロパティのみを反復処理します。

Vue でオブジェクトを走査するための v-for

#Vue では、v-for を通じてオブジェクトを走査できます。命令を実行し、テンプレートのコンテンツをレンダリングします。

構文

<code class="html"><template v-for="item in object">
  <!-- 模板内容 -->
</template></code>

例

オブジェクト

person:

<code class="javascript">const person = {
  name: 'John',
  age: 30
};</code>

があるとします。

person オブジェクトをトラバースして名前と年齢の属性をレンダリングするには、次のテンプレートを使用できます:

<code class="html"><template v-for="item in person">
  <p>属性名：{{ item }}</p>
  <p>属性值：{{ person[item] }}</p>
</template></code>

レンダリング結果:

<code class="html"><p>属性名：name</p>
<p>属性值：John</p>
<p>属性名：age</p>
<p>属性值：30</p></code>

Note

v-for ディレクティブ
• item には、オブジェクト内の各値を表す任意の変数名を指定できます。
オブジェクトのプロパティにアクセスするには、
• person[item] を使用できます。item はプロパティ名です。
v-for ディレクティブは、オブジェクトの列挙可能なプロパティのみを走査できますが、列挙不可能なプロパティは走査できません。

以上がvue で v-for を使用してオブジェクトをトラバースする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。