Penjelasan terperinci mengenai kaedah aplikasi bersyarat kelas CSS dalam Vue.js

mata teras:

• Dalam vue.js, aplikasi bersyarat kelas CSS boleh dilaksanakan dengan mengikat objek JavaScript ke atribut class. Atribut objek sesuai dengan nama kelas CSS, dan nilainya adalah ungkapan JavaScript, yang menentukan sama ada untuk memohon kelas.
• vue.js menyediakan dua sintaks untuk membuat pengikatan kelas: sintaks objek dan sintaks array. Sintaks objek lebih ringkas, manakala sintaks array boleh membuat kod templat lebih jelas. Tatabahasa mana yang hendak dipilih bergantung kepada keutamaan peribadi.
• vue.js menyokong pelbagai kaedah mengikat kelas bersyarat, termasuk menggunakan pengendali ternary, sintaks objek untuk mengikat pelbagai kelas, menggunakan sifat yang dikira, menggabungkan kelas statik dan mengikat, dan gaya mengikat bersyarat.

Kadang -kadang kelas CSS yang perlu diubah semasa runtime. Tetapi apabila menukar kelas, kadang -kadang terbaik untuk menggunakan butiran gaya secara kondusif. Sebagai contoh, katakan pandangan anda mempunyai pager. Pagers sering digunakan untuk menavigasi set projek yang lebih besar. Apabila menavigasi, adalah berguna kepada pengguna untuk memaparkan maklumat pada halaman semasa. Gaya projek ditetapkan secara kondisi mengikut halaman yang kini dilihat. Dalam kes ini, pager mungkin kelihatan seperti ini:

. Kelas ini hanya diperlukan jika halaman kini dilihat. Dalam erti kata lain, kelas CSS perlu digunakan secara kondusif. Nasib baik, Vue menyediakan cara untuk menggunakan kelas CSS untuk unsur -unsur semasa runtime, yang akan saya tunjukkan dalam artikel ini. active Untuk menggunakan kelas CSS secara kondusif semasa runtime, anda boleh mengikat objek JavaScript. Untuk berjaya menyelesaikan tugas ini, dua langkah mesti diselesaikan. Pertama, anda mesti memastikan bahawa kelas CSS ditakrifkan. Kemudian, buat kelas mengikat dalam templat. Saya akan menerangkan langkah -langkah ini secara terperinci dalam artikel ini. active

Perhatikan bahawa setiap halaman dalam coretan kod ini mempunyai elemen item senarai (elemen item senarai ketiga mempunyai kelas

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

active

mengikat menggunakan sintaks objek

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

Mengurangkan jumlah kod dengan menggunakan arahan terbina dalam v-for Vue. Arahan ini digunakan untuk membuat projek dalam gelung. Item dalam contoh ini adalah halaman itu sendiri. Di samping menggunakan perintah v-for, anda juga harus memberi perhatian kepada penggunaan arahan v-bind. Arahan v-bind menghubungkan atribut class elemen kepada contoh VUE. Contoh Vue ditakrifkan seperti berikut:

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="{'page-item':true, 'active':(page === currentPage)}">
        <a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

Contoh Vue ini sangat mudah. Objek di atas data mengandungi harta yang bernama currentPage. Jika anda meninjau semula templat HTML yang ditakrifkan di atas, anda akan melihat bahawa harta ini dirujuk. Malah, objek JavaScript yang dikaitkan dengan setiap kelas mengikat kelihatan seperti ini:

var app = new Vue({
  el: 'http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

Objek ini mentakrifkan dua sifat: page-item dan active. Perlu diingat bahawa ini adalah dua nama kelas CSS yang dibincangkan dalam langkah 1. Dalam langkah 2, kedua -dua rujukan kelas ini telah menjadi nama harta dalam objek JavaScript. Nilai yang berkaitan dengan nama harta ini adalah ungkapan JavaScript. Jika ungkapan menilai kepada nilai -nilai yang benar, kelas CSS akan dimasukkan. Jika ungkapan menilai palsu, tidak akan mengandungi kelas CSS. Dengan peraturan ini, mari kita lihat setiap atribut. Nilai harta pertama adalah page-item. Nilai hardcoded ini digunakan kerana kelas true sentiasa diperlukan. Hartanah kedua page-item menggunakan ekspresi JavaScript. Apabila ungkapan ini benar, kelas active digunakan. Ini membolehkan kita menggunakan kelas active mengikut nilai currentPage. Satu lagi cara untuk menggunakan kelas active adalah untuk mengikat array. active

{'page-item':true, 'active':(page === currentPage)}

. Kedua -dua sifat ini adalah: data dan pageItemClass. Kod permulaan Vue yang dikemas kini yang mengandungi sifat -sifat ini adalah seperti berikut: activeClass

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="[pageItemClass, (page === currentPage) ? activeClass : '']">
        <a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

meningkat, tetapi kod dalam templat sedikit lebih ringkas apabila menggunakan sintaks array. Sintaks objek lebih padat. Pilihan antara sintaks objek dan sintaks array bergantung kepada keutamaan peribadi. Kedua -dua kaedah ini seolah -olah membuat templat HTML lebih rumit. Tetapi, sebenarnya ada lebih banyak lagi di sini. Malah, kita memisahkan fokus. Kami mencipta templat yang didorong oleh data. Ini menjadikan pandangan lebih mudah untuk diuji dan lebih mudah untuk dikekalkan apabila aplikasi berkembang. data

Ringkasan

(Berikut adalah penciptaan pseudo-asal Soalan Lazim dalam teks asal, mengekalkan makna asal tetapi menulis semula ungkapan)

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>