Bagaimana untuk melintasi objek dengan v-for dalam vue

Arahan v-for untuk melintasi objek dalam Vue dilaksanakan melalui sintaks v-for="item in object". Ia membenarkan merentasi sifat objek dan memaparkan kandungan templat Penggunaan khusus adalah seperti berikut: tentukan item nama pembolehubah yang dilalui dalam v-for, yang mewakili setiap nilai dalam objek. Akses sifat objek menggunakan person[item], dengan item ialah nama harta. Arahan v-for hanya mengulangi sifat terhitung objek, bukan sifat terhitung.

v-for untuk merentasi objek dalam Vue

Dalam Vue, anda boleh melintasi objek dan membuat kandungan templat melalui arahan v-for. . , anda boleh menggunakan Templat berikut:

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

Hasil pemaparan:

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

Perhatikan bahawa item dalam arahan

v-untuk boleh menjadi sebarang nama pembolehubah, yang akan mewakili setiap nilai dalam objek.

Untuk mengakses sifat objek, anda boleh menggunakan orang[item], dengan item ialah nama sifat. person：

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

要遍历 person 对象并渲染 name 和 age 属性，可以使用以下模板：

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

渲染结果：

rrreee

注意

• v-for 指令中的 item 可以是任意变量名，它将表示对象中的每个值。
• 要访问对象的属性，可以使用 person[item]，其中 item
Arahan v-for hanya boleh merentasi sifat terhitung objek, tetapi bukan sifat tidak terhitung.

Atas ialah kandungan terperinci Bagaimana untuk melintasi objek dengan v-for dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!