problème de liaison de style vue.js

• classe et style sont des attributs des éléments HTML et sont utilisés pour définir le style des éléments. Nous pouvons utiliser v-bind pour définir les attributs de style.

• L'exemple suivant définit le style de classe dans la balise style. Il n'y a qu'une seule valeur booléenne isActive dans l'instance vue, en utilisant v-bind:class="{ active: isActive }" Liez le style et décidez s'il faut effectuer le rendu en fonction de la valeur booléenne.

<style>.active {    
    width: 100px;    
    height: 100px;    
    background: green;}</style><p id="app">
  <p v-bind:class="{ active: flag}"></p></p><script>new Vue({
  el: &#39;#app&#39;,
  data: {
    flag: true
  }
})
</script>

• Lier plusieurs classes

 v-bind:class="{ active: isActive, 'text-danger': hasError }">

• sous forme d'objet Lier plusieurs classes

<p id="app">
  <p v-bind:class="classObject"></p></p><script>new Vue({
  el: &#39;#app&#39;,
  data: {
    classObject: {
      active: true,      
      &#39;text-danger&#39;: true
    }
  }
})
</script>

• Styles de liaison

<p id="app">
    <p v-bind:class="[activeClass, errorClass]"></p></p><script>new Vue({
  el: &#39;#app&#39;,
  data: {
    activeClass: &#39;active&#39;,
    errorClass: &#39;text-danger&#39;
  }
})
</script>

• Liaison de styles en ligne

<p id="app">
    <p v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }">菜鸟教程</p></p><script>new Vue({
  el: &#39;#app&#39;,
  data: {
    activeColor: &#39;green&#39;,
    fontSize: 30
  }
})

• Liaison de styles en ligne à l'aide d'objets

<p id="app">
  <p v-bind:style="styleObject">菜鸟教程</p></p><script>new Vue({
  el: &#39;#app&#39;,
  data: {
    styleObject: {
      color: &#39;green&#39;,
      fontSize: &#39;30px&#39;
    }
  }
})
</script>

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!