Comment obtenir une classe dans vue.js

Comment obtenir une classe dans vue.js : 1. Utilisez la liaison de données, le code est [php Site Web chinois]; 2. Lier dynamiquement la classe, le code est [

De].

Méthode Vue.js d'obtention de la classe :

Liaison de données

Les instructions vue sont marquées du préfixe v-. L'instruction de liaison de données v-bind : nom d'attribut, abrégé en : nom d'attribut. Un exemple simple de liaison de données est le suivant :

<a v-bind:href="http://www.php.com/">php中文网</a>
简写：
<a :href="http://www.php.com/">php中文网</a>

2. , classe de liaison dynamique

Le délimiteur par défaut de vue est {{ }} La chaîne dans le délimiteur sera considérée comme une variable de données. Vous pouvez définir la classe via la méthode class="{{ className }}", mais vue. Il n'est pas recommandé de mélanger cette méthode avec la méthode v-bind:class Vous ne pouvez choisir qu'une des deux. Bien que v-bind:class ne puisse pas coexister avec la méthode de liaison de variables dans l'attribut class, il peut coexister avec la fonctionnalité de 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. Il n'est pas recommandé de l'utiliser car la valeur de la chaîne est fixe et ne peut pas changer dynamiquement la classe

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

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 à une expression liée, telle qu'une expression javascript.

HTML代码：
<div :class="classA">Demo2</div>
Javascript代码：
data: {
  classA: &#39;class-a&#39;  //当classA改变时将更新class
}
渲染后的HTML:
<div class="class-a">Demo2</div>

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

HTML代码：
<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>
渲染后的HTML:
<div class="class-a">Demo3</div>

2.3 v-bind:class prend en charge les objets, 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>
Javascript代码：
data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>

HTML代码：
<div :class="objectClass">Demo5</div>
Javascript代码：
data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}
渲染后的HTML:
<div class="class-a">Demo5</div>

2.4 : v-bind:classprend en charge les tableaux, dans les tableaux Lorsque les variables changent, la liste des classes sera mise à jour dynamiquement

HTML代码：
<div :class="[classA, classB]">Demo6</div>
Javascript代码：
data: {
  classA: &#39;class-a&#39;,
  classB: &#39;class-b&#39;
}
渲染后的HTML:
<div class="class-a class-b">Demo6</div>

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

HTML代码：
<div :class="[classA, classB]">Demo7</div>
Javascript代码：
data: {
  classA: &#39;class-a&#39;,
  objectClass: {
    classB: &#39;class-b&#39;,  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true，classC将被直接添加到class列表
}
}
渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>

Recommandations d'apprentissage gratuites associées :JavaScript(Vidéo)

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!