Teknologi canggih Vue: pemahaman mendalam tentang prinsip pelaksanaan v-if, v-show, v-else, v-else-if

Teknologi canggih Vue: Pemahaman mendalam tentang prinsip pelaksanaan v-if, v-show, v-else, v-else-if, contoh kod khusus diperlukan

Dalam Vue, v-if, v -show, v-else dan v-else-if ialah arahan pemaparan bersyarat yang biasa digunakan, yang boleh mengawal paparan dan penyembunyian elemen berdasarkan syarat. Walaupun arahan ini biasa dalam pembangunan, prinsip pelaksanaannya tidak begitu jelas. Artikel ini akan menganalisis secara mendalam prinsip pelaksanaan v-if, v-show, v-else dan v-else-if, dan memberikan contoh kod khusus.

1. Prinsip pelaksanaan v-if
v-if ialah arahan pemaparan bersyarat, yang menentukan sama ada untuk membuat elemen atau komponen berdasarkan syarat. Apabila syarat adalah benar, elemen atau komponen yang sepadan akan dipaparkan; Prinsip pelaksanaan v-if adalah seperti berikut:

1. Vue akan menilai terlebih dahulu ungkapan v-if untuk menentukan sama ada syarat itu benar.
2. Jika syarat itu benar, Vue akan mencipta dan memasukkan elemen atau komponen yang sepadan.
3. Jika syarat itu palsu, Vue akan memusnahkan elemen atau komponen yang sepadan dan mengeluarkannya daripada DOM.

Contoh kod:

<template>
  <div>
    <h1 v-if="show">Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

Dalam contoh kod di atas, apabila rancangan adalah benar, "

Hello World!

" akan dipaparkan;

2. Prinsip pelaksanaan v-show
v-show juga merupakan arahan rendering bersyarat Ia mempunyai fungsi yang sama dengan v-if dan boleh mengawal paparan dan penyembunyian elemen berdasarkan syarat. Perbezaannya ialah v-show tidak memusnahkan elemen, tetapi mengawal paparan dan menyembunyikan elemen dengan mengubah suai atribut paparan elemen. Prinsip pelaksanaan

v-show adalah seperti berikut:

1. Vue akan menilai terlebih dahulu ungkapan v-show untuk menentukan sama ada syarat itu benar.
2. Jika syarat itu benar, Vue akan menetapkan atribut paparan elemen kepada nilai asalnya.
3. Jika syarat adalah palsu, Vue akan menetapkan atribut paparan elemen kepada tiada.

Contoh kod:

<template>
  <div>
    <h1 v-show="show">Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

Dalam contoh kod di atas, apabila show adalah benar, elemen dipaparkan dengan menetapkan "display: block"; apabila show is false, elemen disembunyikan dengan menetapkan "display: none".

3. Prinsip pelaksanaan v-else dan v-else-if
v-else dan v-else-if adalah arahan tambahan bagi v-if Mereka boleh digunakan selepas v-if untuk mengendalikan beberapa keadaan. Prinsip pelaksanaan

v-else dan v-else-if adalah seperti berikut:

1. v-else akan berkuat kuasa hanya apabila syarat v-if atau v-else-if sebelumnya adalah palsu.
2. v-else-if akan berkuat kuasa apabila syarat v-if sebelumnya adalah palsu dan syaratnya sendiri adalah benar.

Contoh kod:

<template>
  <div>
    <h1 v-if="score >= 90">优秀</h1>
    <h1 v-else-if="score >= 60">及格</h1>
    <h1 v-else>不及格</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

Dalam contoh kod di atas, mengikut nilai skor, kandungan yang sepadan dipaparkan melalui v-if, v-else-if dan v-else.

Ringkasnya, v-if, v-show, v-else dan v-else-if biasanya digunakan arahan pemaparan bersyarat dalam Vue Ia pada dasarnya dilaksanakan dengan mengawal paparan dan menyembunyikan elemen. Pemahaman yang mendalam tentang prinsip pelaksanaannya akan membantu kami menggunakan dan mengoptimumkan fungsi pemaparan bersyarat Vue dengan lebih baik.

Atas ialah kandungan terperinci Teknologi canggih Vue: pemahaman mendalam tentang prinsip pelaksanaan v-if, v-show, v-else, v-else-if. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!