VUE.JS Aplikasi Gaya Dinamik: Bagaimana untuk mengubah suai margin elemen dengan betul berdasarkan nilai boolean?

VUE.JS Gaya Dinamik: CLEVERLY Gunakan pemilih CSS untuk menyelesaikan masalah pengubahsuaian margin

Dalam pembangunan vue.js, pelarasan dinamik gaya elemen adalah keperluan umum. Artikel ini akan menyelesaikan masalah mengenai margin elemen yang diubahsuai secara dinamik berdasarkan nilai boolean.

Penerangan Masalah:

Pemaju cuba mengawal margin elemen dengan mengikat nama kelas dinamik active . Apabila boolean iscollapse berubah, nama kelas active harus ditambah atau dikeluarkan, dengan itu mengubah padding-left elemen. Walau bagaimanapun, kod CSS awal tidak sah.

Coretan Kod:

Kod Komponen Vue:

<div :class="{ active: iscollapse }" class="content">
  <myheader :iscollapse="!iscollapse"></myheader>
</div>

data () {
  kembali {
    Iscollapse: palsu
  };
},
Kaedah: {
  changemenu () {
    this.iscollapse =! this.iscollapse;
  }
}

Kod CSS awal yang tidak sah:

 .content {
  padding-left: 200px;
  .aktif {
    padding-left: 65px;
  }
}

Analisis Masalah:

Masalahnya ialah penggunaan pemilih CSS. Kod awal menggunakan pemilih keturunan .content .active , yang memerlukan kelas .active mestilah elemen kanak -kanak .content berkuatkuasa. Malah, kelas active secara langsung bertindak pada elemen .content

Penyelesaian:

Pemilih CSS yang betul hendaklah menjadi .content.active kombinasi.content.active, memastikan bahawa gaya hanya digunakan jika elemen .content mempunyai kelas active pada masa yang sama.

Kod CSS yang betul:

 .content {
  padding-left: 200px;
}
.content.active {
  padding-left: 65px;
}

Atau, lebih mudah menggunakan sass:

 .content {
  padding-left: 200px;
  & .aktif {
    padding-left: 65px;
  }
}

Kod SASS bersamaan dengan kod CSS di atas selepas penyusunan. Kedua-duanya memastikan bahawa gaya padding-left: 65px digunakan hanya apabila .content Konten mempunyai kelas active pada masa yang sama, menyelesaikan masalah kegagalan gaya yang disebabkan oleh pemilih keturunan dalam kod awal.

Atas ialah kandungan terperinci VUE.JS Aplikasi Gaya Dinamik: Bagaimana untuk mengubah suai margin elemen dengan betul berdasarkan nilai boolean?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!