Sembunyikan beberapa nilai gelung dalam vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan aplikasi web. Dalam Vue, untuk mengelakkan ralat rendering, kita biasanya perlu menyembunyikan beberapa nilai dalam gelung Artikel ini akan memperkenalkan cara melaksanakan fungsi ini dalam Vue.

1. Arahan v-if

Anda boleh menggunakan arahan v-if dalam Vue untuk mengawal sama ada elemen ditunjukkan atau disembunyikan. Dengan menetapkan syarat dalam arahan v-if, anda boleh menentukan sama ada untuk memaparkan elemen berdasarkan syarat. Dalam gelung, kita boleh menggunakan arahan v-jika untuk menyembunyikan beberapa elemen tertentu.

Contohnya:

<template>
  <div>
    <p v-for="item in list" v-if="item.show">{{item.text}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: 'item 1', show: true },
        { text: 'item 2', show: false },
        { text: 'item 3', show: true },
        { text: 'item 4', show: false }
      ]
    }
  }
}
</script>

Dalam kod di atas, arahan v-for digunakan untuk menggelungkan setiap elemen dalam senarai. Arahan v-if digunakan untuk menentukan sama ada elemen perlu dipaparkan. Dalam contoh ini, hanya elemen yang menunjukkan atributnya adalah benar akan dipaparkan.

2. Atribut yang dikira

Apabila menggunakan arahan v-if, kita perlu menambah atribut secara manual untuk mengawal sama ada setiap elemen perlu dipaparkan. Walau bagaimanapun, jika sifat senarai ditetapkan, kita boleh menggunakan sifat pengiraan Vue untuk mengira secara automatik elemen mana yang perlu dipaparkan.

Contohnya:

<template>
  <div>
    <p v-for="item in showList">{{item.text}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: 'item 1', type: 'typeA' },
        { text: 'item 2', type: 'typeB' },
        { text: 'item 3', type: 'typeA' },
        { text: 'item 4', type: 'typeC' }
      ]
    }
  },
  computed: {
    showList() {
      return this.list.filter(item => item.type !== 'typeB')
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan showList atribut yang dikira untuk menapis elemen dengan atribut jenis 'typeB', sekali gus mencapai tujuan menyembunyikan elemen dalam gelung.

3. Kaedah

Selain menggunakan sifat yang dikira, kita juga boleh menggunakan kaedah untuk mengira paparan unsur secara dinamik.

Contohnya:

<template>
  <div>
    <p v-for="item in list" v-if="shouldShow(item)">{{item.text}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: 'item 1', type: 'typeA' },
        { text: 'item 2', type: 'typeB' },
        { text: 'item 3', type: 'typeA' },
        { text: 'item 4', type: 'typeC' }
      ]
    }
  },
  methods: {
    shouldShow(item) {
      return item.type !== 'typeB'
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan kaedah shouldShow untuk menentukan sama ada elemen itu perlu dipaparkan. Dalam arahan v-for, kami menghantar elemen untuk digelungkan kepada kaedah dan menentukan sama ada elemen dipaparkan berdasarkan nilai pulangan.

4. Ringkasan

Untuk menyembunyikan elemen dalam gelung dalam Vue, biasanya terdapat kaedah berikut:

1 Gunakan arahan v-if untuk mengawal secara manual sama ada elemen dipaparkan.

2. Gunakan sifat yang dikira untuk mengira unsur yang perlu dipaparkan secara dinamik.

3 Gunakan kaedah untuk mengira secara dinamik sama ada elemen dipaparkan.

Ketiga-tiga kaedah di atas masing-masing mempunyai kelebihan dan kekurangan tersendiri Apabila menggunakannya, anda perlu memilih kaedah yang sesuai mengikut situasi sebenar. Sifat dan kaedah yang dikira sering meningkatkan prestasi aplikasi apabila bekerja dengan jumlah data yang besar, jadi mereka harus diberi keutamaan.

Atas ialah kandungan terperinci Sembunyikan beberapa nilai gelung dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!