Verwenden Sie js, um CSS in Vue zu ändern

Vorwort

Vue.js ist ein beliebtes JavaScript-Framework. Sein leichtes MVVM-Framework und viele Tools machen es zur ersten Wahl für Front-End-Ingenieure. Im Vue.js-Framework müssen wir häufig CSS-Stile im JavaScript-Code ändern. Dies ist auch das Thema, das in diesem Artikel behandelt wird.

Verwenden Sie JS, um CSS in Vue zu ändern

In Vue.js können wir CSS-Stile einfach binden, um dynamische Stiländerungen zu erreichen. In einigen Szenarien müssen wir jedoch möglicherweise CSS-Stile über JavaScript-Code ändern. Zu diesem Zeitpunkt müssen wir einige von Vue.js bereitgestellte Tools und Methoden verwenden.

1. Elemente über $refs abrufen

In Vue.js können wir $refs verwenden, um DOM-Elemente abzurufen und den CSS-Stil der Elemente über JavaScript zu ändern. Der folgende Code zeigt beispielsweise, wie man ein DOM-Element über $refs erhält und die Hintergrundfarbe des Elements ändert:

HTML:

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

JavaScript:

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

Im obigen Code verwenden wir this.$ im mount Hook-Funktion. refs ruft das DOM-Element mit der ID „mydiv“ ab und ändert die Hintergrundfarbe des Elements.

Es ist zu beachten, dass $refs nur in der gemounteten Funktion verwendet werden kann, da das DOM-Element erst nach Ausführung der Funktion korrekt gerendert wird.

2. Vue-Style-Loader verwenden

Vue.js bietet ein sehr praktisches Tool Vue-Style-Loader, mit dem Stylesheets dynamisch in das DOM eingefügt werden können. Wir können den folgenden Code verwenden, um den Vue-Style-Loader zu installieren:

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

Die Verwendung ist wie folgt:

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>

Im obigen Code verwenden wir den Vue-Style-Loader, um das Stylesheet dynamisch in das einzufügen DOM. Wir können JavaScript auch verwenden, um die CSS-Stile in diesem Stylesheet dynamisch zu ändern.

3. Berechnete Eigenschaften verwenden

In Vue.js können wir CSS-Stilobjekte über berechnete Eigenschaften zurückgeben, sodass wir CSS-Stile direkt in Vue-Vorlagen binden können, was bequemer zu verwenden ist. Der folgende Code zeigt beispielsweise, wie berechnete Eigenschaften verwendet werden, um CSS-Stile zurückzugeben:

JavaScript:

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

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

Im obigen Code geben wir ein CSS-Stilobjekt über die berechnete Eigenschaft myStyle zurück, die die Eigenschaft „backgroundColor“ des Elements enthält.

Fazit

In diesem Artikel wird erläutert, wie Sie mit JavaScript CSS-Stile im Vue.js-Framework ändern. Wir können DOM-Elemente abrufen und ihre CSS-Stile über $refs ändern, Stylesheets dynamisch mit dem Vue-Style-Loader einfügen oder berechnete Eigenschaften verwenden, um CSS-Stilobjekte zurückzugeben. Wenn Sie bei der Entwicklung eines Vue.js-Projekts auf Probleme stoßen, können Ihnen diese Tipps meiner Meinung nach bei der Lösung des Problems helfen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um CSS in Vue zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!