keadaan tersembunyi vue

Apabila pembangunan bahagian hadapan menjadi semakin matang dan kompleks, semakin banyak masalah yang perlu disesuaikan dan diselesaikan oleh pembangun kami. Antaranya, pengoptimuman logik paparan halaman merupakan aspek yang perlu kita ambil perhatian. Untuk mengoptimumkan kecekapan pemaparan halaman dan pengalaman interaktif, Vue menyediakan fungsi yang sangat mudah: keadaan tersembunyi.

Apakah keadaan tersembunyi?

Pertama sekali, mari kita lihat secara ringkas tentang keadaan tersembunyi Vue. Ia sebenarnya menyembunyikan atau memaparkan kandungan komponen dengan mengawal atribut paparan elemen Dom. Sebagai contoh, jika kita perlu menyembunyikan kawasan tertentu dalam keadaan tertentu, kita boleh menulis seperti ini:

<template>
  <div>
    <div class="info" v-show="isShow">
      <!-- 这里是一些信息内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true // 控制显示或隐藏
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan Vue "v-show" dan mengikatnya kepada pembolehubah isShow pada. Apabila nilai isShow adalah benar, kandungan kawasan akan dipaparkan; apabila nilai isShow adalah palsu, kandungan kawasan akan disembunyikan. Perbezaan antara

dan v-if

Sebelum ini kami menyebut bahawa elemen Dom dalam v-show disembunyikan atau dipaparkan dengan mengubah suai atribut paparan. Jadi apakah perbezaan antara v-if dan v-show?

Pertama sekali, v-if akan dilaksanakan apabila komponen perlu dipaparkan, manakala v-show hanya mengubah suai atribut paparan dan akan dilaksanakan tanpa mengira sama ada komponen itu perlu dipaparkan. Oleh itu, apabila komponen kerap perlu menukar paparan, menggunakan v-show untuk mengoptimumkan prestasi adalah lebih tinggi.

Kedua, ungkapan v-if dan v-show ditulis sedikit berbeza. v-if diikuti dengan ungkapan, dan komponen akan dipaparkan hanya apabila ungkapan itu benar; tersembunyi.

Selain itu, v-if memadamkan sepenuhnya komponen daripada pokok Dom dan v-show menetapkan atribut paparan komponen kepada tiada. Oleh itu, v-if boleh menyebabkan masalah prestasi dengan lukisan semula Dom apabila menukar dengan kerap.

Perlu diingatkan bahawa v-if dan v-show tidak disyorkan untuk digunakan pada masa yang sama, tetapi salah satu daripadanya harus dipilih berdasarkan keperluan sebenar.

Senario Aplikasi

Keadaan tersembunyi Vue boleh digunakan pada banyak senario berikut ialah beberapa senario aplikasi biasa.

1. Kawalan status log masuk

Apabila pengguna tidak log masuk, kami perlu menyembunyikan beberapa kandungan yang hanya boleh dilihat oleh pengguna log masuk. Pada masa ini, anda boleh menggunakan keadaan tersembunyi Vue untuk melaksanakannya secara ringkas:

<template>
  <div>
    <div v-show="isLogin">
      <!-- 需要登录后才能查看的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false // 默认未登录
    }
  },
  created() {
    // 模拟登录，修改isLogin值
    this.isLogin = true;
  }
}
</script>

2. Kawalan paparan data jadual

Apabila data jadual sangat besar, kami tidak mahu memaparkan semua data sekaligus, tetapi perlu dipaparkan dalam halaman. Pada masa ini, anda boleh menggunakan keadaan tersembunyi Vue untuk melaksanakan paparan halaman:

<template>
  <div>
    <div v-for="(item, index) in data" :key="index" v-show="(index+1) > (currentPage-1)*pageSize && (index+1) <= currentPage*pageSize">
      <!-- 表格展示内容 -->
    </div>
    <div>
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    }
  },
  created() {
    // 获取表格数据，赋值给data
  }
}
</script>

Apabila terdapat banyak data jadual, kami hanya perlu memaparkan data pada halaman semasa dan menyembunyikan data lain.

Ringkasan

Dalam pembangunan bahagian hadapan, mengoptimumkan kecekapan pemaparan halaman dan pengalaman interaktif merupakan aspek yang perlu kita perhatikan. Keadaan tersembunyi Vue menyediakan kaedah mudah dan mudah digunakan yang boleh memaparkan dan menyembunyikan kandungan halaman dengan cepat. Kita harus memilih kaedah keadaan tersembunyi yang sesuai berdasarkan keperluan sebenar dan menggabungkan ciri-ciri v-if dan v-show untuk mengoptimumkan kecekapan pemaparan halaman dan pengalaman pengguna.

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