Cara menggunakan v-show dan v-if dalam Vue untuk mencapai pemaparan halaman dinamik

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web dinamik. v-show dan v-if adalah kedua-dua arahan dalam Vue untuk memaparkan paparan secara dinamik. Mereka boleh membantu kami mempunyai kawalan yang lebih baik ke atas halaman apabila elemen DOM tidak ditunjukkan atau disembunyikan. Artikel ini akan menerangkan secara terperinci cara menggunakan arahan v-show dan v-if dalam Vue untuk mencapai pemaparan halaman dinamik.

arahan v-show dalam Vue

v-show ialah arahan dalam Vue yang memaparkan atau menyembunyikan unsur secara dinamik berdasarkan nilai ungkapan. Dengan v-show, elemen sentiasa dipaparkan dalam DOM dan hanya CSS digunakan untuk mengawal menunjukkan atau menyembunyikan.

Arahan v-show boleh digunakan dengan cara berikut:

<template>
  <div>
    <h1 v-show="showTitle">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle
    }
  }
}
</script>

Dalam kod di atas, kami telah mencipta butang yang menogol paparan tajuk. Kami mengikat pembolehubah showTitle dan tajuk hanya akan dipaparkan jika nilainya benar. Mengklik butang menukar nilai showTitle dalam kaedah toggleTitle kepada palsu dan memaparkan semula DOM. Dalam kes ini, tajuk akan hilang daripada penyemak imbas.

arahan v-if dalam Vue

arahan v-if digunakan untuk memaparkan elemen DOM hanya apabila syarat yang dinyatakan adalah benar. Tidak seperti v-show, v-if menambah/mengalih keluar elemen DOM secara dinamik.

arahan v-if boleh digunakan dengan cara berikut:

<template>
  <div>
    <h2 v-if="isLoggedIn">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan v-if untuk menyemak sama ada anda log masuk atau tidak. Jika sudah log masuk, kami memberikan mesej alu-aluan dalam DOM, jika tidak, kami menyembunyikannya. Kaedah log masuk dan log keluar dipanggil apabila kami mengklik pada butang log masuk atau keluar dan kaedah ini akan mengemas kini data dan DOM.

Gabungan v-show dan v-if dalam Vue

Dalam banyak kes, kita perlu memaparkan kawasan tertentu secara dinamik dan menunjukkan/menyembunyikan kandungan yang berbeza mengikut situasi yang berbeza. v-show dan v-if boleh digabungkan untuk mencapai pemaparan dinamik jenis ini.

<template>
  <div>
    <div v-if="isActivated">
      <h3>Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3>Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan arahan v-if untuk menyemak sama ada ia diaktifkan dan memberikan pandangan yang berbeza. Jika isActivated adalah benar, kami memberikan mesej alu-aluan ke dalam DOM jika tidak, kami memaparkan mesej untuk mengesahkan pengguna. Kami menggunakan arahan v-show untuk mencapai paparan dinamik bagi sesetengah kandungan.

Dengan komponen dengan butang, kami boleh menggunakan toggleActivation untuk menogol nilai isActivated, dengan itu menukar pemaparan paparan DOM. Dengan menggunakan v-show dan v-if bersama-sama, kami boleh mempunyai kawalan yang lebih baik ke atas halaman dan menjadikannya lebih dinamik dan fleksibel.

Ringkasan

v-show dan v-if ialah dua arahan berguna dalam Vue, digunakan untuk mengawal paparan dan menyembunyikan elemen DOM. v-show digunakan untuk mengawal paparan/menyembunyikan CSS, manakala v-if menambah/mengalih keluar elemen DOM secara dinamik. Menggunakan kedua-dua arahan ini bersama-sama memberikan anda kawalan yang lebih baik ke atas pemaparan dinamik DOM. Apabila melaksanakan pemaparan halaman dinamik Vue, kita harus memutuskan untuk menggunakan v-show atau v-if dan gabungannya mengikut situasi.

Atas ialah kandungan terperinci Cara menggunakan v-show dan v-if dalam Vue untuk mencapai pemaparan halaman dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!