Bagaimana vue mengehadkan traversal tatasusunan

Vue ialah rangka kerja bahagian hadapan yang popular yang boleh melaksanakan antara muka UI responsif dan menyokong komponenisasi, modularisasi dan ciri lain, membolehkan pembangun membina aplikasi web yang kompleks dengan mudah. Dalam Vue, kami sering menggunakan tatasusunan untuk menyimpan set data Dalam sesetengah senario, kami perlu mengehadkan traversal tatasusunan Artikel ini akan memperkenalkan secara terperinci cara melaksanakan sekatan traversal tatasusunan dalam Vue.

1. Analisis Keperluan

Dalam perkembangan sebenar, kita mungkin menghadapi senario sedemikian. Katakan terdapat pengumpulan data dan anda perlu mengendalikan elemen tertentu dalam koleksi, tetapi anda tidak mahu melintasi keseluruhan koleksi Bagaimana untuk mengehadkan julat lintasan koleksi?

Sebagai contoh, dalam forum, pengguna boleh menerbitkan siaran dan ulasan, dan pentadbir boleh menghantar amaran, larangan, memadam siaran, dll. kepada pengguna, tetapi pentadbir hanya mempunyai kuasa untuk mengurus bahagian tertentu, jadi mereka hanya boleh Untuk mengendalikan siaran dan ulasan dalam bahagian ini, adalah perlu untuk mengehadkan operasi traversal hanya kepada siaran dan ulasan dalam bahagian ini.

2. Idea pelaksanaan

Untuk melaksanakan sekatan traversal pada tatasusunan, dalam Vue kita boleh menggunakan gabungan sifat yang dikira dan kaedah Array.prototype.filter().

Langkahnya adalah seperti berikut:

1 Tentukan pengumpulan data dalam data, contohnya:

data() {
  return {
    messages: [
      { content: "Vue 是一种渐进式框架", type: "info" },
      { content: "Vue 2.x 版本支持 IE9 及以上浏览器", type: "info" },
      { content: "Vue 3.x 版本抛弃了 IE 支持", type: "warning" },
      { content: "Vue 可以构建单页应用和多页应用", type: "warning" },
      { content: "Vue 可以与 React、Angular 等框架共存", type: "success" },
      { content: "Vue 支持桌面端和移动端应用开发", type: "success" },
    ],
    limitedMessages: [],
    filterType: "success" // 按类型筛选
  };
}

2 operasi:

computed: {
  filteredMessages() {
    this.limitedMessages = this.messages.filter(
      (item) => item.type === this.filterType
    );
    return this.limitedMessages;
  },
},

Menurut analisis kod contoh di atas, atribut filteredMessages yang dikira sebenarnya adalah hasil traversal terhad tatasusunan mesej, yang mengehadkan traversal kepada item data sahaja dengan jenis yang sama dengan kejayaan.

3. Gunakan filteredMessages dalam templat untuk memaparkan pengumpulan data terhad:

<div v-for="(item, index) in filteredMessages" :key="index">
  {{ item.content }}
</div>

Dalam kod di atas, gunakan arahan v-for untuk melintasi tatasusunan filteredMessages dan gunakan item.content untuk menjadikan setiap Kandungan unsur.

Pada ketika ini, Vue boleh melaksanakan sekatan traversal tatasusunan melalui sifat yang dikira dan kaedah penapis().

3. Ringkasan

Artikel ini menerangkan terutamanya cara melaksanakan sekatan lintasan tatasusunan dalam Vue. Dengan menggabungkan sifat yang dikira dengan kaedah penapis(), kami boleh menapis pengumpulan data dengan mudah dan mencapai traversal data yang cekap. Dalam aplikasi sebenar, ia boleh dilaraskan secara fleksibel mengikut keperluan sebenar untuk mencapai kecekapan pembangunan dan pengalaman pengguna yang terbaik.

Atas ialah kandungan terperinci Bagaimana vue mengehadkan traversal tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!