Cara Menggunakan Kelas CSS di Vue.js

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:

Terdapat lima halaman dalam contoh ini, hanya satu halaman yang boleh dipilih pada satu masa. Jika anda membina pager ini dengan bootstrap, halaman yang dipilih akan memohon kelas CSS bernama

. 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

Langkah 1: Tentukan kelas CSS

Katakan bahawa item lima halaman yang dipaparkan dalam imej di atas Gunakan definisi HTML berikut:

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

). Seperti yang anda boleh meneka, ini adalah kelas CSS yang anda mahu memohon secara kondusif. Untuk melakukan ini, anda perlu menambah objek JavaScript.

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

Langkah 2: Buat kelas mengikat

active

Apabila membuat pengikatan kelas dalam templat, terdapat dua pilihan utama: Gunakan sintaks objek atau gunakan sintaks array. Saya akan menunjukkan kepada anda cara menggunakan kedua -dua kaedah di seluruh artikel ini.

mengikat menggunakan sintaks objek

Untuk membuat pengikatan kelas menggunakan sintaks objek, ungkapan JavaScript mesti digunakan. Ekspresi yang akan kita gunakan dapat dilihat dalam kod yang berkaitan dengan artikel ini. Kod yang berkaitan adalah seperti berikut:

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

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:

<code class="language-html"><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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div></code>

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:

<code class="language-javascript">var app = new Vue({
  el: 'https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});</code>

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

mengikat menggunakan sintaks array

Vue membolehkan senarai kelas CSS digunakan dengan mengikat kepada array. Jika anda ingin menggunakan sintaks array, HTML yang dipaparkan dalam langkah 1 akan menjadi:

<code class="language-javascript">{'page-item':true, 'active':(page === currentPage)}</code>

versi berjalan menggunakan sintaks array. Satu -satunya perbezaan ialah tatasusunan digunakan pada pengikatan kelas. Alternatif ini memerlukan kehadiran dua sifat lain dalam objek Vue

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

<code class="language-html"><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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div></code>

Seperti yang anda lihat, saiz objek

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

Saya harap artikel ini dapat membantu anda. Jika anda ingin mengetahui lebih lanjut mengenai Vue.js, anda boleh menyemak kandungan Vue yang lain di SitePoint.

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

Soalan Lazim mengenai permohonan kelas CSS dalam Vue.js bersyarat

Bagaimana menggunakan pengendali ternary untuk mengikat kelas bersyarat?

Dalam vue.js, pengendali ternary boleh digunakan untuk mengikat kelas bersyarat. Ini adalah cara yang mudah dan cekap untuk menukar antara dua kelas berdasarkan keadaan. Contohnya adalah seperti berikut:

<div :class="condition ? 'classA' : 'classB'"></div>

Dalam contoh ini, jika keadaan itu benar,

digunakan; Keadaan ini boleh menjadi ungkapan JavaScript yang sah. classA classB

Bagaimana untuk mengikat pelbagai kelas dalam vue.js?

vue.js membolehkan pengikatan bersyarat pelbagai kelas menggunakan sintaks objek. Ini sangat berguna apabila pelbagai kelas perlu digunakan mengikut keadaan yang berbeza. Contohnya adalah seperti berikut:

Dalam contoh ini, jika <div :class="{ 'classA': conditionA, 'classB': conditionB }"></div> adalah benar,

digunakan; Kedua -dua

dan conditionA boleh menjadi ungkapan JavaScript yang sah. classA conditionB classB Bolehkah anda menggunakan atribut yang dikira untuk mengikat kelas bersyarat dalam vue.js? conditionA conditionB

Ya, mengikat kelas bersyarat boleh digunakan dalam vue.js. Ciri -ciri pengkomputeran berguna apabila menentukan logik kelas adalah kompleks. Contohnya adalah seperti berikut:

Dalam contoh Vue, tentukan

sebagai harta yang dikira:

<div :class="computedClass"></div> Dalam contoh ini, atribut yang dikira

akan mengembalikan nama kelas berdasarkan logik kompleks yang ditakrifkan di dalamnya.

computedClass

Bagaimana untuk menggabungkan kelas statik dan terikat dalam vue.js?

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

computedClass Dalam vue.js, kelas statik dan kelas mengikat boleh digabungkan. Ini sangat berguna apabila anda perlu sentiasa menggunakan kelas tertentu, tetapi anda juga perlu memohon kelas lain. Contohnya adalah seperti berikut:

Dalam contoh ini,

akan sentiasa digunakan, dan

dan

masing -masing akan digunakan mengikut

dan <div :class="['staticClass', { 'classA': conditionA, 'classB': conditionB }]"></div> masing -masing.

staticClass Bagaimana untuk mengikat gaya dalam gaya dalam vue.js? classA classB conditionA vue.js membolehkan pengikatan bersyarat gaya inline menggunakan sintaks objek. Ini berguna apabila gaya tertentu perlu digunakan mengikut keadaan. Contohnya adalah seperti berikut: conditionB

Dalam contoh ini, jika adalah benar, warna merah, dan jika

palsu, warna berwarna biru. Begitu juga, jika

adalah benar, saiz fon adalah 12px;

Atas ialah kandungan terperinci Cara Menggunakan Kelas CSS di Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!