vue data hide paparan

Dalam pembangunan Vue, kami sering menghadapi keperluan untuk menyembunyikan atau memaparkan data. Sebagai contoh, kami mungkin perlu menyembunyikan beberapa data sensitif dalam keadaan tertentu atau memaparkan data tertentu apabila syarat dipenuhi. Vue menyediakan pelbagai cara untuk menyembunyikan dan memaparkan data. Seterusnya, kami akan memperkenalkan kaedah ini.

1. Rendering Bersyarat

Arahan pemaparan bersyarat Vue boleh menambah arahan v-if atau v-show pada elemen DOM untuk mengawal sama ada elemen DOM adalah benar atau salah berdasarkan syarat. Penggunaan kedua-dua arahan ini adalah berbeza:

v-jika arahan mengalih keluar elemen daripada atau menambahkan semula elemen pada DOM, jadi ia boleh digunakan untuk mengendalikan operasi yang lebih intensif atau melibatkan sejumlah besar sub-komponen keadaan.

Arahan v-show menyembunyikan dan memaparkan elemen melalui atribut paparan CSS. Oleh kerana elemen itu sendiri sentiasa wujud dalam DOM, arahan v-show mengendalikan kedua-dua operasi ringan dan operasi biasa dengan lebih cekap.

Berikut ialah contoh mudah:

<template>
  <div>
    <p v-if="showText">这里是需要隐藏的文本。</p>
    <p v-show="showText">这里是需要显示的文本。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
}
</script>

Dalam contoh ini, kami mengisytiharkan atribut data yang dipanggil showText. Mengikut nilai showText, kita boleh mengawal paparan dan penyembunyian teks melalui arahan v-if dan v-show.

2. atribut dikira

Jika kita perlu mengawal paparan dan penyembunyian elemen tertentu secara dinamik berdasarkan keadaan atribut data, atribut yang dikira ialah pilihan yang baik. Sifat yang dikira ialah sifat yang dikira dalam Vue, ia hanya dikira semula apabila sifat data yang bergantung padanya berubah. Kita boleh menggunakan atribut yang dikira untuk mengira logik yang mengawal paparan dan penyembunyian elemen.

Berikut ialah contoh menggunakan atribut yang dikira:

<template>
  <div>
    <p v-if="showText">这里是需要隐藏的文本。</p>
    <p v-show="showTextComputed">这里是需要显示的文本。</p>
    <button @click="toggleShowText">切换显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
  computed: {
    showTextComputed() {
      // 根据数据状态来计算是否显示元素
      return this.showText ? true : false
    },
  },
  methods: {
    toggleShowText() {
      // 切换showText的数据状态
      this.showText = !this.showText
    },
  },
}
</script>

Dalam contoh ini, kami mengisytiharkan atribut yang dikira showTextComputed untuk mengira keadaan yang dipaparkan dan tersembunyi bagi elemen. Dengan menukar nilai showText menggunakan kaedah toggleShowText, kami boleh mengawal secara dinamik hasil pengiraan atribut yang dikira.

3. slot

Mekanisme slot Vue membenarkan komponen kanak-kanak memasukkan kandungan pada komponen induk. Dengan menggunakan slot, anda boleh menyediakan kandungan dan gaya HTML tersuai untuk komponen anak dalam komponen induk. Kami boleh menyembunyikan dan memaparkan data melalui mekanisme slot.

Berikut ialah contoh penggunaan slot untuk menyembunyikan dan menunjukkan kandungan:

<template>
  <div>
    <content v-if="showText">
      <p>这里是需要隐藏的文本。</p>
    </content>
    <content v-show="showText">
      <p>这里是需要显示的文本。</p>
    </content>
    <button @click="toggleShowText">切换显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
  methods: {
    toggleShowText() {
      this.showText = !this.showText
    },
  },
}
</script>

Dalam contoh ini, kami menggunakan teg kandungan sebagai slot dan memaparkan kandungan yang sepadan berdasarkan status data. Melalui kaedah toggleShowText, kami boleh menukar keadaan data secara dinamik untuk mengawal paparan dan penyembunyian kandungan.

Ringkasan

Berikut ialah tiga cara berbeza untuk menyembunyikan dan menunjukkan data. Paparan bersyarat ialah kaedah pemprosesan yang paling biasa, yang boleh memaparkan dan memadamkan elemen DOM berdasarkan keadaan data. Atribut yang dikira sesuai untuk situasi di mana keadaan data perlu dikira. Mekanisme slot sesuai untuk situasi di mana anda perlu menyediakan gaya tersuai dan kandungan HTML untuk komponen kanak-kanak. Dalam pembangunan Vue, kami secara fleksibel boleh memilih kaedah yang sesuai dengan kami mengikut keperluan yang berbeza untuk menyembunyikan dan memaparkan data.

Atas ialah kandungan terperinci vue data hide paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!