Cara menggunakan v-show dan v-if untuk memaparkan jenis data yang berbeza dalam Vue

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular hari ini Ia mengguna pakai corak seni bina MVVM dan menjadikan pembangunan bahagian hadapan lebih cekap dan mudah melalui paparan dipacu data. Dalam Vue, v-show dan v-if ialah arahan yang biasa digunakan. Mereka boleh mengawal paparan atau rendering elemen DOM.

Walau bagaimanapun, semasa proses pembangunan, kita selalunya perlu menggunakan struktur DOM yang berbeza untuk menghasilkan mengikut jenis data yang berbeza Pada masa ini, perbezaan antara v-show dan v-if menjadi sangat penting.

Pertama sekali, v-show ialah arahan untuk mengawal gaya elemen DOM Ia mengawal keterlihatan elemen melalui atribut paparan CSS. Apabila ungkapan terikat kepada v-show adalah benar, elemen akan dipaparkan, jika tidak ia akan disembunyikan. Berikut ialah contoh:

<div v-show="isShow">这里是要显示的内容</div>

Dalam contoh ini, kami mengikat nilai Boolean isShow melalui v-show Apabila isShow adalah benar, elemen div akan dipaparkan. Jika isShow palsu, elemen itu tersembunyi, tetapi ia masih wujud dalam DOM.

Sebaliknya, v-if ialah arahan yang mengawal kehadiran atau ketiadaan elemen DOM. Apabila ungkapan yang diikat oleh v-if adalah benar, elemen akan diberikan ke dalam DOM, jika tidak, ia tidak akan diberikan. Berikut ialah contoh:

<div v-if="isRender">这里是要渲染的内容</div>

Dalam contoh ini, kami mengikat nilai Boolean isRender melalui v-if Apabila isRender adalah benar, elemen div akan dipaparkan ke dalam DOM. Jika isRender palsu, elemen itu tidak akan dipaparkan ke dalam DOM.

Ringkasnya, v-show mengawal paparan dan penyembunyian elemen Ia hanya dilaksanakan melalui atribut paparan CSS dan dilengkapkan dengan mengubah suai elemen DOM sedia ada. v-if mengawal kehadiran atau ketiadaan elemen Ia dilaksanakan dengan memanipulasi DOM secara dinamik dan kerap melakukan operasi sisipan atau pemadaman.

Jadi bagaimana untuk memilih antara v-show atau v-if mengikut jenis data yang berbeza? Berikut ialah contoh:

<div>
  <ul v-show="isShowList">
    <li v-for="item in list">{{item.name}}</li>
  </ul>
  <table v-if="isShowTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</div>

Dalam contoh ini, kami menggunakan v-show untuk mengawal paparan dan menyembunyikan senarai ul, dan menggunakan v-if untuk mengawal pemaparan jadual. Apabila isShowList adalah benar, senarai ul akan dipaparkan; apabila isShowTable adalah benar, jadual jadual akan dipaparkan.

Melalui contoh di atas, kita dapati bahawa rancangan v harus digunakan apabila elemen DOM sedia ada perlu dipaparkan atau disembunyikan secara dinamik. Apabila anda perlu menjana elemen DOM berbeza secara dinamik berdasarkan jenis data yang berbeza, anda harus menggunakan v-if.

Sudah tentu, dalam pembangunan sebenar, kita tidak perlu memilih hanya satu arahan untuk memaparkan data Kita boleh menggunakan v-show dan v-if dalam kombinasi untuk melengkapkan keperluan bagi jenis paparan data yang berbeza. Perlu diingat bahawa apabila jumlah data adalah besar, memasukkan atau memadamkan elemen DOM secara dinamik akan membawa tekanan prestasi yang lebih besar kepada halaman. Oleh itu, kita harus cuba mengelakkan operasi pemadaman atau pemadaman yang kerap dan cuba gunakan v-show untuk mengawal elemen DOM sedia ada.

Atas ialah kandungan terperinci Cara menggunakan v-show dan v-if untuk memaparkan jenis data yang berbeza dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!