Comment contrôler le style de page sur la page vue (deux méthodes)

Vue est un framework frontal JavaScript très populaire. Sa fonctionnalité est basée sur les données, permettant aux développeurs de créer des interfaces utilisateur interactives plus efficacement. Dans Vue, nous pouvons utiliser des variables pour contrôler le style de la page.

Dans Vue, nous pouvons utiliser les propriétés calculées (Computed) et le style de liaison (Binding Style) pour contrôler le style de la page. Présentons chacune d'elles ci-dessous.

1. Propriétés calculées

Les propriétés calculées sont une propriété spéciale dans Vue. Sa valeur est une fonction dans la fonction de propriété calculée, nous pouvons renvoyer dynamiquement une nouvelle valeur en fonction des modifications des données. Par conséquent, nous pouvons utiliser des propriétés calculées pour déterminer la valeur de style à lier.

Ce qui suit est un exemple :

<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>

Dans cet exemple, nous définissons d'abord deux variables color et fontSize dans data, qui sont toutes deux des valeurs de style à lier. Ensuite, un attribut calculé styleObj est défini dans calculé, qui renvoie un objet. Le nom de l'attribut dans l'objet est le nom du style et la valeur de l'attribut est la valeur du style. Enfin, utilisez la méthode de style de liaison dans le modèle pour lier styleObj au div afin d'obtenir une liaison de style.

2. Styles de liaison

En plus d'utiliser des propriétés calculées, nous pouvons également utiliser des styles de liaison pour contrôler les styles de page. Vue fournit une syntaxe concise qui nous permet d'utiliser des variables pour lier des valeurs de style.

Voici un exemple :

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

Dans cet exemple, nous utilisons le style de liaison dans le modèle pour passer un objet à l'attribut style. Le nom de l'attribut dans cet objet est le nom du style à lier et la valeur de l'attribut est la valeur de la variable. Cette méthode est très simple et permet d'obtenir des styles de liaison dynamiques.

Résumé

Il existe deux façons de contrôler le style de page dans Vue : les propriétés calculées et les styles liés. Les propriétés calculées utilisent des fonctions pour renvoyer des objets afin de calculer les objets de style à lier ; les styles de liaison utilisent une syntaxe concise pour lier les variables aux styles. Quelle que soit la méthode utilisée, le style de page peut être contrôlé efficacement, rendant notre application plus flexible et plus puissante.

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!