Comment lier dynamiquement la classe et le style dans vue

Vue peut lier dynamiquement les noms et les styles de classe via la directive v-bind. Pour lier un nom de classe, utilisez la directive v-bind:class pour transmettre un objet ou un tableau. La valeur vraie dans l'objet indique que le nom de classe correspondant est ajouté à l'élément ; pour lier un style, utilisez le v-bind ; :directive de style à transmettre l'objet et la clé de l'objet. Représente un attribut CSS, et la valeur représente la valeur de l'attribut ; l'instruction v-bind peut également transmettre une valeur de tableau, et chaque élément du tableau est un objet ou une chaîne lorsque ; la valeur des données liées change, Vue mettra automatiquement à jour le nom de classe ou le style de l'élément, modifiera facilement l'apparence des éléments en fonction de l'état du composant ou de l'interaction de l'utilisateur.

Liaison dynamique de classe et de style dans Vue

Dans Vue, vous pouvez lier dynamiquement des noms de classe et des styles à l'aide de la directive v-bind.

Lier le nom de la classe

Pour lier dynamiquement un nom de classe, vous pouvez utiliser la directive v-bind:class et transmettre un objet ou un tableau comme valeur. Si la valeur de l'objet est vraie, le nom de classe correspondant sera ajouté à l'élément. v-bind:class 指令，传入一个对象或数组作为值。如果对象的值为 true，则对应的类名会被添加到元素上。

<code class="html"><div v-bind:class="{ active: isActive }"></div></code>

上面的代码块中，如果 isActive 的值为 true，则 active 类将被添加到 <div> 元素上。

绑定样式

要动态绑定样式，可以使用 v-bind:style 指令，传入一个对象作为值。对象的键表示 CSS 属性，值表示属性的值。

<code class="html"><div v-bind:style="{ color: 'red', fontSize: '20px' }"></div></code>

上面的代码块中，<div> 元素的 color 属性将被设置为红色，font-size 属性将被设置为 20 像素。

使用数组值

v-bind:class 和 v-bind:style

<code class="html"><div v-bind:class="[class1, class2]"></div>
<div v-bind:style="[['color', 'red'], ['font-size', '20px']]"></div></code>

Dans le bloc de code ci-dessus, si la valeur de isActive est vraie, la classe active sera ajoutée au <div> élément .

Style de liaison

Pour lier dynamiquement un style, vous pouvez utiliser la directive v-bind:style et transmettre un objet comme valeur. Les clés de l'objet représentent les propriétés CSS et leurs valeurs représentent la valeur de la propriété. 🎜rrreee🎜Dans le bloc de code ci-dessus, l'attribut color de l'élément <div> sera défini sur rouge et l'attribut font-size l'attribut sera défini sur 20 pixels. 🎜🎜🎜Utilisation de valeurs de tableau🎜🎜🎜Les directives v-bind:class et v-bind:style peuvent également transmettre des valeurs de tableau. Chaque élément du tableau doit être un objet ou une chaîne. 🎜rrreee🎜🎜Répondre aux modifications de données🎜🎜🎜Lorsque la valeur des données liées change, Vue mettra automatiquement à jour le nom de classe ou le style de l'élément. Cela rend la liaison dynamique des noms et des styles de classe très pratique, car ils peuvent modifier l'apparence des éléments en fonction de l'état du composant ou de l'interaction de l'utilisateur. 🎜

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!