Gunakan js untuk mengubah suai css dalam vue

Kata Pengantar

Vue.js ialah rangka kerja JavaScript yang popular Rangka kerja MVVM yang ringan dan banyak alatan menjadikannya pilihan pertama untuk jurutera hadapan. Dalam rangka kerja Vue.js, kita selalunya perlu mengubah suai gaya CSS dalam kod JavaScript. Ini juga topik yang dibincangkan dalam artikel ini.

Gunakan JS untuk mengubah suai CSS dalam Vue

Dalam Vue.js, kami boleh mengikat gaya CSS dengan mudah untuk mencapai perubahan dinamik dalam gaya. Tetapi dalam beberapa senario, kita mungkin perlu mengubah suai gaya CSS melalui kod JavaScript. Pada masa ini, kita perlu menggunakan beberapa alatan dan kaedah yang disediakan oleh Vue.js.

1. Dapatkan elemen melalui $refs

Dalam Vue.js, kami boleh menggunakan $refs untuk mendapatkan elemen DOM dan mengubah suai gaya CSS elemen melalui JavaScript. Contohnya, kod berikut menunjukkan cara untuk mendapatkan elemen DOM melalui $refs dan mengubah suai warna latar belakang elemen:

HTML:

<div ref="mydiv">这是一个DIV元素</div>

JavaScript:

<script>
export default {
  mounted(){
    this.$refs.mydiv.style.backgroundColor = 'red'
  }
}
</script>

The kod di atas , kami menggunakan ini.$refs dalam fungsi cangkuk yang dipasang untuk mendapatkan elemen DOM dengan ID "mydiv" dan mengubah suai warna latar belakang elemen.

Perlu diambil perhatian bahawa $refs hanya boleh digunakan dalam fungsi yang dipasang, kerana elemen DOM tidak akan diberikan dengan betul sehingga fungsi tersebut dilaksanakan.

2. Gunakan vue-style-loader

Vue.js menyediakan alat vue-style-loader yang sangat mudah, yang boleh memasukkan helaian gaya secara dinamik ke bahagian tengah DOM. Kami boleh menggunakan kod berikut untuk memasang vue-style-loader:

npm install vue-style-loader --save-dev

Penggunaan adalah seperti berikut:

JavaScript:

<style>
  .myclass {
    background-color:red;
  }
</style>

<script>
import 'vue-style-loader'

export default {
  mounted(){
    const style = document.createElement('style')
    style.innerText = `
      .myclass {
        background-color: yellow;
      }
    `
    document.head.appendChild(style)
  }
}
</script>

Dalam kod di atas, kami menggunakan vue -style-loader Helaian gaya dimasukkan secara dinamik ke dalam DOM. Kami juga boleh menggunakan JavaScript untuk mengubah suai gaya CSS secara dinamik dalam helaian gaya ini.

3. Gunakan sifat yang dikira

Dalam Vue.js, kita boleh mengembalikan objek gaya CSS melalui sifat yang dikira, supaya kita boleh mengikatnya secara langsung dalam gaya CSS templat Vue lebih banyak mudah digunakan. Contohnya, kod berikut menunjukkan cara menggunakan sifat terkira untuk mengembalikan gaya CSS:

JavaScript:

<script>
export default {
  data(){
    return {
        bgColor: 'red'
    }
  },
  computed:{
    myStyle(){
      return {
        backgroundColor: this.bgColor
      }
    }
  }
}
</script>

<template>
  <div :style="myStyle">这是一个DIV元素</div>
</template>

Dalam kod di atas, kami mengembalikan objek gaya CSS melalui sifat terkira myStyle, yang mengandungi sifat backgroundColor elemen.

Kesimpulan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk mengubah suai gaya CSS dalam rangka kerja Vue.js. Kita boleh mendapatkan elemen DOM dan mengubah suai gaya CSS mereka melalui $refs, memasukkan helaian gaya secara dinamik menggunakan vue-style-loader atau menggunakan sifat yang dikira untuk mengembalikan objek gaya CSS. Jika anda menghadapi masalah semasa membangunkan projek Vue.js, saya percaya petua ini boleh membantu anda menyelesaikan masalah tersebut.

Atas ialah kandungan terperinci Gunakan js untuk mengubah suai css dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!