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>

Style de liaison

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!