Analisis ringkas arahan rendering senarai Vue: v-for

Artikel ini akan membawa anda melalui arahan pemaparan senarai Vue: v-for.

Pemarahan senarai Vue

1.1.v-untuk

⭐⭐
Secara peribadi, saya merasakan bahawa ia sebenarnya adalah gelung untuk dengan sintaks asas Ia adalah serupa dalam penggunaan, tetapi bentuknya berbeza jika anda faham, anda boleh menggunakannya. (Mempelajari perkongsian video: tutorial video vue)

Penggunaan;

1 Lintas tatasusunan

v-for="item in 数组"

v-for="(item, index) in 数组"

Lakukan Traversal tatasusunan contoh:

<div class="item" v-for="item in products">
    <h3 class="title">商品:{{item.name}}</h3>
    <span>价格:{{item.price}}</span>
    <p>秒杀：{{item.desc}}</p>
</div>

const app = Vue.createApp({
        data() {
          return {
            //2.数组 存放的是对象
            products: [
              { id: 11, name: "mac", price: 1000, desc: "99" },
            ],
          };
        },
      });

app.mount("#app");

2. Objek traversal
⭐⭐
v-for juga menyokong objek merentasi dan menyokong satu, dua atau tiga parameter:

• Satu parameter : “nilai dalam objek”;
• Dua parameter: “(nilai, kunci) dalam objek”;
• Tiga parameter: “(nilai, kunci, indeks) dalam objek” ;

v-for juga menyokong traversal nombor:
Setiap item ialah nombor; >1.2.v-untuk dan templat

<!-- 2.遍历对象 -->
      <ul>
        <li v-for="(value,key,index) in info">
          {{value}} - {{key}} - {{index}}
        </li>
      </ul>
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");

⭐⭐

<li v-for="item in 100">{{item}}</li>

Kita boleh menggunakan elemen templ untuk menggelung melalui pemaparan sekeping kandungan yang mengandungi berbilang elemen

Mengapa tidak menggunakan div di sini?

Saya tidak terlalu memikirkan perkara ini semasa saya belajar dahulu, saya mendapati masalah ini semasa saya menyusun nota saya

Sebabnya

:Jika ia dibalut oleh div, div juga akan dipaparkan

Tetapi jika ia dibalut dengan templat, templat tidak akan dipaparkan Berbanding dengan menggunakan div, ia akan menyimpan penggunaan tag div yang tidak diperlukan.

Malah, peranan templat ialah pemegang tempat templat, yang boleh membantu kami membungkus elemen Semasa proses gelung, templat tidak akan dipaparkan ke halaman.

• div (jika div tidak mempunyai makna sebenar, anda boleh menggunakan templat untuk menggantikannya)

templat

0a0b09a86095b895314008cac4ff62a7
        45a2772a6b6107b401db3c9b82c049c2{{value}}54bdf357c58b8a65c66d7c19c8e4d114
        8e99a69fbe029cd4e2b854e244eab143{{key}}128dba7a3a77be0113eb0bea6ea0a5d0
        5a8028ccc7a7e27417bff9f05adf5932{{index}}72ac96585ae54b6ae11f849d2649d9e6
16b28748ea4df4d9c2150843fecfba68

1.3.v-untuk pengesanan kemas kini tatasusunan
⭐⭐

<template v-for="(value,key,index) in infos">
        <span>{{value}}</span>
        <strong>{{key}}</strong>
        <i>{{index}}</i>
</template>

Vue membungkus kaedah perubahan tatasusunan yang didengar, jadi mereka juga akan mencetuskan kemas kini paparan

Kaedah yang dibalut termasuk

:

push() Masukkan elemen dari belakang tatasusunan
pop() Padamkan elemen dari belakang tatasusunan

shift() Padamkan elemen dari hadapan daripada tatasusunanunshift() Masukkan elemen dari hadapan tatasusunan

splice() Potong, masukkan dan padamkan tatasusunan
• sort() Sort
• reverse() Reverse
• Penggunaan kaedah ini sebenarnya serupa dalam js apabila anda memikirkannya
• Kaedah untuk menggantikan tatasusunan
• [Tutorial video berkaitan yang disyorkan:

Tutorial Bermula Vuejs

,

Bermula dengan Web Front-End

]

Atas ialah kandungan terperinci Analisis ringkas arahan rendering senarai Vue: v-for. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!