Utilisez js pour modifier le CSS dans vue

Avant-propos

Vue.js est un framework JavaScript populaire. Son framework MVVM léger et ses nombreux outils en font le premier choix des ingénieurs front-end. Dans le framework Vue.js, nous devons souvent modifier les styles CSS dans le code JavaScript. C’est également le sujet abordé dans cet article.

Utilisez JS pour modifier CSS dans Vue

Dans Vue.js, nous pouvons facilement lier des styles CSS pour réaliser des changements dynamiques de styles. Mais dans certains scénarios, nous devrons peut-être modifier les styles CSS via du code JavaScript. Pour le moment, nous devons utiliser certains outils et méthodes fournis par Vue.js.

1. Obtenir des éléments via $refs

Dans Vue.js, nous pouvons utiliser $refs pour obtenir des éléments DOM et modifier le style CSS des éléments via JavaScript. Par exemple, le code suivant montre comment obtenir un élément DOM via $refs et modifier la couleur d'arrière-plan de l'élément :

HTML :

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

JavaScript :

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

Dans le code ci-dessus, nous utilisons this.$ dans le fichier monté. fonction hook. refs obtient l'élément DOM avec l'identifiant "mydiv" et modifie la couleur d'arrière-plan de l'élément.

Il convient de noter que $refs ne peut être utilisé que dans la fonction montée, car l'élément DOM ne sera correctement rendu qu'après l'exécution de la fonction.

2. Utilisez vue-style-loader

Vue.js fournit un outil très pratique vue-style-loader, qui peut insérer dynamiquement des feuilles de style dans le DOM. Nous pouvons utiliser le code suivant pour installer vue-style-loader :

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

L'utilisation est la suivante :

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>

Dans le code ci-dessus, nous utilisons vue-style-loader pour insérer dynamiquement la feuille de style dans le DOMAINE. Nous pouvons également utiliser JavaScript pour modifier dynamiquement les styles CSS dans cette feuille de style.

3. Utiliser les propriétés calculées

Dans Vue.js, nous pouvons renvoyer des objets de style CSS via des propriétés calculées, afin de pouvoir lier directement les styles CSS dans les modèles Vue, ce qui est plus pratique à utiliser. Par exemple, le code suivant montre comment utiliser les propriétés calculées pour renvoyer des styles CSS :

JavaScript :

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

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

Dans le code ci-dessus, nous renvoyons un objet de style CSS via la propriété calculée myStyle, qui contient la propriété backgroundColor de l'élément.

Conclusion

Cet article explique comment utiliser JavaScript pour modifier les styles CSS dans le framework Vue.js. Nous pouvons obtenir des éléments DOM et modifier leurs styles CSS via $refs, insérer dynamiquement des feuilles de style à l'aide de vue-style-loader ou utiliser des propriétés calculées pour renvoyer des objets de style CSS. Si vous rencontrez des problèmes lors du développement d'un projet Vue.js, je pense que ces conseils peuvent vous aider à résoudre le problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!