Senario penggunaan fungsi pemaparan bersyarat dalam dokumentasi Vue

Vue ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini Ia menyediakan banyak alat dan komponen praktikal, membolehkan pembangun membangunkan aplikasi web yang kompleks dengan cekap. Antaranya, pemaparan bersyarat ialah bahagian yang sangat penting dalam Vue. Ia boleh membantu kami menghasilkan kandungan yang berbeza dalam keadaan yang berbeza dan mencapai kesan dinamik Di bawah kami akan memperkenalkan secara terperinci senario penggunaan pemaparan bersyarat dalam dokumen Vue.

1. Laksanakan pemaparan bersyarat melalui v-if dan v-else

v-if dan v-else ialah fungsi pemaparan bersyarat yang paling biasa digunakan dalam rangka kerja Vue berdasarkan keadaan dipersembahkan. Ini ialah cara paling mudah untuk pemaparan bersyarat dalam Vue.

Selain contoh di atas, v-if dan v-else juga boleh digunakan dengan arahan v-for, yang secara dinamik boleh menjana elemen HTML yang sepadan berdasarkan panjang tatasusunan, contohnya:

<div v-if="isTrue">条件为真时显示的内容</div>
<div v-else>条件为假时显示的内容</div>

Dalam kod di atas, jika terdapat elemen item yang memenuhi syarat dalam tatasusunan itemList, elemen li yang sepadan akan dijana dan nilai di dalamnya akan dipaparkan, "Tiada data yang memenuhi syarat " akan dipaparkan.

2. Laksanakan pemaparan bersyarat melalui v-show

Arahan v-show juga boleh melaksanakan pemaparan bersyarat Penggunaannya serupa dengan v-if, tetapi ia tidak akan memusnahkan dan membina semula elemen DOM . Sebaliknya, kawal paparan dan penyembunyian elemen dengan mengawal atribut paparan CSS, contohnya:

<ul>
  <li v-for="item in itemList" v-if="item.isShow">{{item.value}}</li>
  <li v-else>没有符合条件的数据</li>
</ul>

Dalam kod di atas, jika isTrue adalah benar, elemen div akan dipaparkan, jika tidak elemen itu akan menjadi tersembunyi.

Perlu diingatkan bahawa arahan v-show tidak boleh bekerjasama dengan arahan v-else untuk melaksanakan pemprosesan logik yang sepadan seperti arahan v-if.

3. Laksanakan pemaparan bersyarat melalui atribut yang dikira

Dalam beberapa kes khas, kami mungkin perlu memaparkan dan menyembunyikan elemen HTML secara dinamik berdasarkan berbilang syarat atribut untuk mencapai ini. Perenderan bersyarat, contohnya:

<div v-show="isTrue">条件为真时显示的内容</div>

Dalam contoh di atas, kami menggunakan atribut yang dikira untuk mengira secara dinamik atribut isShow dan isShow1, dan kemudian memaparkan dan menyembunyikan elemen HTML yang berbeza berdasarkan nilai secara dinamik daripada dua sifat ini.

4. Laksanakan pengikatan gaya bersyarat melalui v-bind:class

Selain mengawal paparan dan penyembunyian elemen, kami juga boleh menggunakan arahan v-bind:class untuk mengikat secara dinamik pada syarat kelas gaya yang ditentukan, contohnya:

<div v-show="isShow">元素1</div>
<div v-show="isShow1">元素2</div>
<div v-show="isShow && isShow1">元素3</div>

<script>
export default {
  data() {
    return {
      type: '',
      status: ''
    }
  },
  computed: {
    isShow() {
      return this.type === 'A'
    },
    isShow1() {
      return this.status === 'B'
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan v-bind:class untuk mengikat kelas gaya secara dinamik Jika isActive adalah benar, gaya akan menyertakan "aktif". class , jika tidak, kelas "teks-menengah" akan disertakan dalam gaya.

Selain arahan v-bind:class, rangka kerja Vue juga menyediakan banyak arahan mengikat gaya praktikal, seperti v-bind:style, v-bind:background-color, dll., yang boleh dinamik mengikut keadaan yang berbeza.

Ringkasan: Fungsi pemaparan bersyarat Vue ialah bahagian yang sangat praktikal dalam rangka kerja Vue, yang boleh membantu pembangun mencapai paparan elemen HTML dinamik dan kesan pengikatan gaya. Contoh di atas hanyalah beberapa senario penggunaan mudah Dalam pembangunan sebenar, terdapat banyak situasi kompleks lain yang perlu diselesaikan menggunakan fungsi pemaparan bersyarat Pembangun perlu memilih kaedah pemaparan bersyarat yang paling sesuai berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Senario penggunaan fungsi pemaparan bersyarat dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!