Comment lier dynamiquement des classes dans vue ? Présentation de la méthode

Le cœur de Vue.js est un système de liaison de données réactif qui nous permet de « lier » le DOM aux données sous-jacentes en utilisant une syntaxe spéciale dans les modèles HTML ordinaires.

Le DOM lié sera synchronisé avec les données Chaque fois que les données changent, la vue DOM correspondante sera également mise à jour. Sur la base de cette fonctionnalité, lier dynamiquement des classes via vue.js devient très simple.

1. La commande de liaison de données

vue est marquée du préfixe v-, la commande de liaison de données v-bind : nom de l'attribut, l'abréviation est : nom d'attribut, un exemple simple de liaison de données est le suivant :

<a v-bind:href=" 
简写：
<a :href="http://www.cnblogs.com/">博客园首页</a>

2. Le séparateur par défaut pour la classe de liaison dynamique

vue est {{ }}, la chaîne dans le séparateur sera considérée comme une variable de données. Vous pouvez définir la classe via la méthode class="{{ className }}", mais Vue ne recommande pas de mélanger cette méthode avec la méthode v-bind:class. Vous ne pouvez choisir qu'entre les deux. . Un.

v-bind:class Bien qu'elle ne puisse pas coexister avec la méthode de liaison des variables dans l'attribut class, elle peut coexister avec la fonctionnalité de classe native. La classe native et v-bind:class sont autorisés à apparaître en même temps dans. une balise DOM.

2.1 v-bind:class prend en charge le type de chaîne, mais il n'est pas recommandé de l'utiliser car la valeur de la chaîne est fixe et la nécessité de changer dynamiquement la classe ne peut pas être réalisée

HTML代码：
<div :class=" &#39;classA classB&#39; ">Demo1</div>
渲染后的HTML:

2.2 v -bind:class Prend en charge les variables de données lorsque la valeur de la variable change, la classe sera mise à jour en même temps. La valeur de la directive v-bind:class est limitée à l'expression de liaison, telle que l'expression javascript

Code HTML :

<div :class="classA">Demo2</div>

Code Javascript :

data: {
  classA: 'class-a'  //当classA改变时将更新class
}

HTML rendu :

<div class="class-a">Demo2</div>

La valeur écrite dans l'instruction sera considérée comme une expression, telle qu'une expression javascript, donc v-bind:class accepte les opérations ternaires :

Code HTML :

<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>

HTML rendu :

<div class="class-a">Demo3</div>

2.3 v-bind:class prend en charge les objets et la classe sera mise à jour dynamiquement lorsque l'objet change

Code HTML :

<div :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</div>

Code Javascript :

data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

HTML rendu :

<div class="class-b">Demo4</div>

Code HTML :

<div :class="objectClass">Demo5</div>

Code Javascript :

data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

HTML rendu :

<div class="class-a">Demo5</div>

2.4 : v-bind:class prend en charge les tableaux Lorsque les variables du tableau changent, la liste des classes sera mise à jour dynamiquement

Code HTML :

<div :class="[classA, classB]">Demo6</div>

Code Javascript. :

data: {
  classA: 'class-a',
  classB: 'class-b'
}

HTML rendu :

<div class="class-a class-b">Demo6</div>

Le tableau peut contenir des types d'objets si l'objet objet dans le tableau change, la liste des classes sera également mise à jour

Code HTML :

<div :class="[classA, classB]">Demo7</div>

Code Javascript :

data: {
  classA: 'class-a',
  objectClass: {
    classB: 'class-b',  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true，classC将被直接添加到class列表
}
}

HTML rendu :

<div class="class-a class-b classD">Demo7</div>

Recommandations associées :

Vue frontale 2020 questions d'entretien Gros résumé (avec réponses)

recommandation du didacticiel vue : 5 dernières sélections de didacticiels vidéo vue.js en 2020

Plus de programmation liée Pour connaissances, veuillez visiter : Enseignement de la programmation ! !

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!