Bagaimana untuk memaparkan data tersembunyi dalam vue

Dalam Vue, kita boleh menyembunyikan atau memaparkan data melalui v-if, v-show, sifat atau kaedah yang dikira. Di bawah, mari kita lihat lebih dekat kaedah ini.

1. paparan kawalan v-if/v-else

<template>
  <div>
    <div v-if="isShow">这是要显示的数据</div>
    <div v-else>这是要隐藏的数据</div>
  </div>
</template>

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

Dalam contoh ini, kami menggunakan data jenis Boolean isShow untuk mengawal sama ada untuk memaparkan atau menyembunyikan data. Apabila nilai isShow adalah benar, data yang akan dipaparkan akan dipaparkan jika tidak, ia akan disembunyikan.

2. paparan kawalan v-show

<template>
  <div>
    <div v-show="isShow">这是要显示的数据</div>
  </div>
</template>

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

Tidak seperti v-if/v-else, paparan v memaparkan dan menyembunyikan data dengan mengawal sifat paparan CSS. Apabila nilai isShow adalah benar, data yang akan dipaparkan akan dipaparkan dan atribut paparan ialah nilai yang ditetapkan untuk elemen, seperti blok secara lalai, jika tidak, ia akan disembunyikan dan atribut paparan tiada;

v-if/v-else dan v-show mempunyai senario penggunaan yang berbeza v-if/v-else sesuai digunakan apabila penukaran yang kerap diperlukan, kerana ia hanya akan berfungsi apabila syarat dipenuhi. Render kandungan yang sepadan, kemudian musnahkan dan render semula apabila syarat tidak dipenuhi adalah sesuai untuk digunakan apabila rendering awal perlu mengawal paparan atau menyembunyikan data berdasarkan syarat, kerana ia hanya mengawal sifat paparan CSS; .

3. atribut pengiraan yang dikira

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  computed: {
    message() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

atribut yang dikira boleh mengira secara dinamik beberapa nilai dalam templat dan mengembalikan hasil pengiraan kepada templat untuk pemaparan. Dalam contoh di atas, kami menggunakan kaedah mesej dalam sifat pengiraan yang dikira untuk menukar data secara dinamik untuk dipaparkan berdasarkan perubahan dalam nilai isShow.

4. kaedah

<template>
  <div>
    <div>{{ getMessage() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  methods: {
    getMessage() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

kaedah kaedah secara dinamik boleh memanggil kaedah dalam templat dan mengembalikan nilai pulangan kaedah kepada templat untuk pemaparan. Dalam contoh di atas, kami menggunakan kaedah getMessage dalam kaedah kaedah untuk menukar data secara dinamik untuk dipaparkan berdasarkan perubahan dalam nilai isShow.

Tidak kira kaedah mana yang digunakan, kuncinya ialah memilih kaedah yang sesuai untuk menyembunyikan atau memaparkan data mengikut senario tertentu.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan data tersembunyi dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!