vue.js lie les styles de classe et de style

Une exigence courante pour la liaison de données est de manipuler la liste de classes d'un élément et ses styles en ligne. Comme ce sont tous des attributs, nous pouvons utiliser v-bind pour les gérer : il nous suffit d'évaluer la chaîne finale de l'expression. Cependant, la concaténation de chaînes est fastidieuse et sujette aux erreurs. Par conséquent, Vue.js améliore spécifiquement v-bind lorsqu'il est utilisé avec des classes et des styles. Outre les chaînes, le type de résultat d’une expression peut également être un objet ou un tableau.

Utilisez v-bind:class ou :class pour lier un style ou une classe

Lier une classe

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

code js

var myVue = new Vue({
   el: ".test",
   data: {
     isActive:true,
     isCc:false
   },
 });

Ou le code suivant peut également être implémenté

<div class="test">
   <div :class=classObject></div>
 </div>

code js

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

Lier la classe via un tableau

<div class="test">
  <div :class="[activeClass,error]">dsdsd</div>
</div>

code js

var myVue = new Vue({
   el: ".test",
   data: {
     activeClass:"active",
     error:"ddd"
   },
 });

Attribut de style de liaison

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

code js

var myVue = new Vue({
  el: ".test",
  data: {
    styleObject:{
     color: "red",
      fontSize: "30px"
    }
  },
});

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés aux classes et styles de liaison vue.js, veuillez faire attention au site Web PHP chinois !