Liaison de classe et de style
Répertoire
Classe HTML de liaison
Syntaxe d'objet
Nous pouvons passer v-bind:class un objet pour changer dynamiquement de classe : v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。
你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>和如下 data：
data: {
isActive: true,
hasError: false
}结果渲染为：
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里：
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}渲染为：
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass
<div v-bind:class="[{ active: isActive }, errorClass]"></div> La syntaxe ci-dessus indique que l'existence de active cette classe dépendra de l'attribut de données isActive de vérité.
Vous pouvez transmettre plus d'attributs dans l'objet pour changer dynamiquement plusieurs classes. De plus, la directive v-bind:class peut coexister avec l'attribut class normal. Lorsqu'il y a le modèle suivant :
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
}) et les données suivantes : 🎜<my-component class="baz boo"></my-component>🎜Le résultat est rendu comme : 🎜
<p class="foo bar baz boo">Hi</p>🎜Lorsque
isActive ou hasError change, la liste des classes sera mis à jour en conséquence. Par exemple, si hasError est évalué à true, la liste de classes devient "static active text-danger". 🎜🎜L'objet de données lié n'a pas besoin d'être défini en ligne dans le modèle : 🎜<my-component v-bind:class="{ active: isActive }"></my-component><p class="foo bar active">Hi</p>🎜Le résultat du rendu est le même que ci-dessus. Nous pouvons également lier ici une propriété calculée 🎜 de l'objet renvoyé. Il s'agit d'un modèle courant et puissant : 🎜
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {
activeColor: 'red',
fontSize: 30
}🎜🎜🎜🎜🎜syntaxe du tableau🎜🎜🎜🎜Nous pouvons passer un tableau à v-bind:class, pour appliquer une liste de classes : 🎜
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}🎜 est rendu comme : 🎜<div v-bind:style="[baseStyles, overridingStyles]"></div>🎜 Si vous souhaitez également changer de classe dans la liste en fonction de conditions, vous pouvez utiliser une expression ternaire : 🎜
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>🎜Écrire comme ceci ajoutera toujours errorClass, mais ajoutez activeClassisActive est véridique[1] 🎜code>. 🎜🎜Cependant, écrire de cette façon est un peu fastidieux lorsqu'il existe plusieurs classes conditionnelles. La syntaxe objet peut donc également être utilisée dans la syntaxe tableau : 🎜rrreee🎜🎜🎜Utilisé sur les composants
Ce chapitre suppose que vous avez déjà une certaine compréhension des Composants Vue. Bien sûr, vous pouvez également sauter ici et y revenir plus tard.
Lors de l'utilisation de l'attribut class sur un composant personnalisé, ces classes seront ajoutées à l'élément racine du composant. Les classes qui existent déjà sur cet élément ne seront pas écrasées. class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，如果你声明了这个组件：
rrreee然后在使用它的时候添加一些 class：
rrreeeHTML 将被渲染为:
rrreee对于带数据绑定 class 也同样适用：
rrreee当 isActive 为 truthy[1] 时，HTML 将被渲染成为：
rrreee
绑定内联样式
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
rrreeerrreee直接绑定到一个样式对象通常更好，这会让模板更清晰：
rrreeerrreee同样的，对象语法常常结合返回对象的计算属性使用。
数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
rrreee
自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
多重值
2.3.0+
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
rrreee这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
译者注
[1] truthy 不是 truePar exemple, si vous déclarez ce composant : rrreee
puis ajoutez des classes lors de son utilisation : rrreee
HTML sera rendu comme :
rrreeeLa même chose s'applique aux classes avec liaison de données :
rrreee🎜Quand Quand < code>isActive est véridique[1]🎜, le HTML sera rendu comme : 🎜rrreee🎜🎜🎜🎜Liaison de styles en ligne🎜🎜
Syntaxe d'objet 🎜🎜🎜🎜La syntaxe d'objet de 🎜🎜Array Grammar🎜🎜🎜🎜La syntaxe de tableau de 🎜🎜Ajouter automatiquement des préfixes🎜🎜🎜🎜Lorsque 🎜🎜Valeurs multiples🎜🎜🎜🎜🎜2.3.0+🎜🎜🎜À partir de la version 2.3.0, vous pouvez lier 🎜Note du traducteur🎜🎜🎜[1] la vérité n'est pas v-bind:style est très intuitive - elle ressemble beaucoup à CSS, mais il s'agit en fait d'un objet JavaScript . Les noms de propriétés CSS peuvent être nommés en camelCase ou kebab-case (n'oubliez pas de les mettre entre guillemets) : 🎜rrreeerrreee🎜Il est généralement préférable de se lier directement à un objet de style, ce qui rend le modèle plus clair : 🎜rrreeerrreee🎜De même, la syntaxe des objets est souvent utilisé en conjonction avec des propriétés calculées qui renvoient des objets. 🎜🎜🎜🎜v-bind:style peut appliquer plusieurs objets de style au même élément Ci-dessus : 🎜rrreee🎜🎜🎜v-bind:style est utilisé, vous devez ajouter Préfixe du moteur de navigation 🎜 Propriétés CSS, telles que transform, Vue.js le fera Détecter et ajouter automatiquement le préfixe approprié. 🎜🎜🎜🎜style L'attribut fournit un tableau contenant plusieurs valeurs, souvent utilisé pour fournir plusieurs valeurs préfixées, par exemple : 🎜rrreee🎜Écrire comme ceci ne restituera que la dernière valeur du tableau prise en charge par le navigateur. Dans cet exemple, si le navigateur prend en charge flexbox sans le préfixe du navigateur, alors seul display: flex sera rendu. 🎜🎜🎜🎜true, voir l'explication de 🎜MDN🎜 pour plus de détails. 🎜🎜🎜🎜🎜 🎜
