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

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

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!