Vue.js Rendering Bersyarat dan V-if vs V-show

Jika anda suka artikel saya, anda boleh belikan saya kopi :)
Belikan saya kopi

Vue.js Rendering Bersyarat

Arahan

v-if dan v-show digunakan untuk membuat blok dalam Vue.js secara bersyarat.

v-jika

Dalam vue.js, arahan v-if digunakan untuk memaparkan bersyarat blok. Blok hanya akan dipaparkan jika ungkapan arahan itu mengembalikan nilai kebenaran.

Contoh :

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="show">Vue.js</h1>
</template>

Anda boleh menggunakan arahan v-else untuk menunjukkan "blok lain" untuk v-if. Jika ungkapan v-jika arahan tidak kembali benar, blok v-else dipaparkan.

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="awesome"> v-if directive </h1>
    <h1 v-else> v-else directive </h1>
</template>

v-lain-jika

v-else-if, berfungsi sebagai "else if block" untuk v-if. Ia juga boleh dirantai beberapa kali. Apabila v-if dan v-else-if tidak dinilai kepada benar, arahan v-else dicetuskan.

 <p v-if="currentState === 0">State 0: Message 1</p>
    <p v-else-if="currentState === 1">State 1: Message 2</p>
    <p v-else-if="currentState === 2">State 2: Message 3</p>
    <p v-else>State 3: Message 4</p>

rancangan v

Apabila kami ingin memaparkan item secara bersyarat, kami boleh menggunakan arahan v-show sebagai pilihan lain.

<h1 v-show="ok">Ok!</h1>

Perbezaannya ialah elemen dengan v-show sentiasa dipaparkan dan kekal dalam DOM. v-show menukar sifat paparan CSS untuk menunjukkan atau menyembunyikan elemen. v-show tidak berfungsi dengan v-else

v-jika lwn v-tunjukkan

v-if ialah pemaparan bersyarat "sebenar" kerana ia memastikan pendengar acara dan komponen anak di dalam blok bersyarat dimusnahkan dengan betul dan dicipta semula semasa togol.

v-jika : jika syarat adalah palsu pada pemaparan awal, ia tidak akan melakukan apa-apa - blok bersyarat tidak akan diberikan sehingga syarat menjadi benar buat kali pertama.

v-show sentiasa dipaparkan dan kekal dalam DOM. v-show menukar sifat paparan CSS untuk menunjukkan atau menyembunyikan elemen. v-show tidak berfungsi dengan v-else

v-if mempunyai kos togol yang lebih tinggi manakala v-show mempunyai kos paparan awal yang lebih tinggi. lebih suka v-show jika anda perlu menukar sesuatu dengan kerap, dan lebih suka v-if jika keadaan tidak mungkin berubah semasa masa jalan.

Kesimpulan

Dalam artikel ini, kami mengkaji ciri dan perbezaan arahan v-if dan v-show. Memahami perbezaan ini adalah penting untuk mengoptimumkan prestasi pemaparan dan mengurus keterlihatan elemen dalam aplikasi Vue.js anda.

Atas ialah kandungan terperinci Vue.js Rendering Bersyarat dan V-if vs V-show. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!