Cara menggunakan v-if, v-else-if, v-else untuk mencapai pelbagai pemaparan bersyarat dalam Vue

Vue ialah rangka kerja JavaScript popular yang digunakan terutamanya untuk membina aplikasi web interaktif. Dalam Vue, kita boleh menggunakan arahan v-if, v-else-if dan v-else untuk melaksanakan pelbagai pemaparan bersyarat.

Arahan v-if digunakan untuk memaparkan elemen DOM berdasarkan syarat Elemen hanya akan dipaparkan apabila syarat itu benar. Arahan v-else-if dan v-else digunakan untuk menggunakan berbilang keadaan dalam arahan v-if.

Di bawah ini kami akan memperkenalkan secara terperinci cara menggunakan arahan ini untuk melaksanakan pelbagai pemaparan bersyarat.

Menggunakan arahan v-if

Untuk menggunakan arahan v-if, kita boleh menambahkannya pada elemen DOM yang perlu dinilai secara bersyarat dan mengikatnya pada ungkapan.

Sebagai contoh, kita boleh mencipta komponen Vue yang serupa dengan yang berikut:

<template>
  <div>
    <p v-if="showMessage">显示消息</p>
  </div>
</template>

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

Dalam komponen ini, kami menggunakan arahan v-if untuk menentukan secara bersyarat sama ada untuk memaparkan mesej. Jika nilai pembolehubah showMessage adalah benar, maka elemen ini akan diberikan ke dalam DOM.

Jika nilai pembolehubah showMessage adalah palsu, maka elemen ini tidak akan dipaparkan pada halaman.

Gunakan arahan v-else-if dan v-else

Kadangkala kita perlu menghasilkan elemen DOM berdasarkan berbilang syarat, kemudian kita boleh menggunakan arahan v-else-if dan v-else .

Contohnya, kita boleh mencipta komponen seperti berikut:

<template>
  <div>
    <p v-if="size === 'small'">这是小尺寸</p>
    <p v-else-if="size === 'large'">这是大尺寸</p>
    <p v-else>这是默认尺寸</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small'
    };
  }
};
</script>

Dalam contoh ini, kita menentukan elemen mana yang perlu dipaparkan berdasarkan nilai saiz pembolehubah. Jika saiz sama dengan "kecil", hanya elemen p pertama akan dipaparkan;

Ringkasan

Vue menyediakan arahan v-if, v-else-if dan v-else yang mudah, membolehkan kami memberikan elemen DOM secara fleksibel berdasarkan berbilang syarat. Kami boleh menggunakan arahan ini untuk mencipta aplikasi interaktif yang berkuasa dan menjadikannya bersyarat.

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