Cara mengawal gaya halaman pada halaman vue (dua kaedah)

Vue ialah rangka kerja bahagian hadapan JavaScript yang sangat popular. Cirinya dipacu data, membolehkan pembangun membina antara muka pengguna interaktif dengan lebih cekap. Dalam Vue, kita boleh menggunakan pembolehubah untuk mengawal gaya halaman.

Dalam Vue, kita boleh menggunakan sifat dikira (Dikira) dan gaya mengikat (Gaya Pengikat) untuk mengawal gaya halaman Mari perkenalkan setiap satu di bawah.

1. Sifat yang dikira

Harta yang dikira ialah sifat istimewa dalam Vue data. Oleh itu, kita boleh menggunakan sifat yang dikira untuk mengetahui nilai gaya untuk diikat.

Berikut ialah contoh:

<template>
  <div :style="styleObj"></div>
</template>
<script>
  export default {
    data() {
      return {
        color: 'red',
        fontSize: '16px'
      }
    },
    computed: {
      styleObj() {
        return {
          color: this.color,
          fontSize: this.fontSize
        }
      }
    }
  }
</script>

Dalam contoh ini, kita mula-mula mentakrifkan dua warna pembolehubah dan Saiz fon dalam data, yang merupakan kedua-dua nilai gaya untuk diikat. Seterusnya, styleObj atribut yang dikira ditakrifkan dalam pengiraan, yang mengembalikan objek Nama atribut dalam objek ialah nama gaya, dan nilai atribut ialah nilai gaya. Akhir sekali, gunakan kaedah gaya pengikatan dalam templat untuk mengikat styleObj ke div untuk mencapai pengikatan gaya.

2. Gaya pengikatan

Selain menggunakan sifat yang dikira, kami juga boleh menggunakan gaya pengikatan untuk mengawal gaya halaman. Vue menyediakan sintaks ringkas yang membolehkan kami menggunakan pembolehubah untuk mengikat nilai gaya.

Berikut ialah contoh:

<template>
  <div :style="{ color: textColor, fontSize: fontSize }"></div>
</template>
<script>
  export default {
    data() {
      return {
        textColor: 'red',
        fontSize: '16px'
      }
    }
  }
</script>

Dalam contoh ini, kami menggunakan gaya mengikat dalam templat untuk menghantar objek kepada atribut gaya. Nama atribut dalam objek ini ialah nama gaya yang akan diikat, dan nilai atribut ialah nilai pembolehubah. Kaedah ini sangat mudah dan boleh mencapai gaya pengikatan dinamik.

Ringkasan

Terdapat dua cara untuk mengawal gaya halaman dalam Vue: sifat dikira dan gaya terikat. Sifat yang dikira menggunakan fungsi untuk mengembalikan objek untuk mengira objek gaya yang akan diikat gaya mengikat menggunakan sintaks ringkas untuk mengikat pembolehubah kepada gaya. Tidak kira kaedah yang digunakan, gaya halaman boleh dikawal dengan berkesan, menjadikan aplikasi kami lebih fleksibel dan berkuasa.

Atas ialah kandungan terperinci Cara mengawal gaya halaman pada halaman vue (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!