Vue でクラスとスタイルを動的にバインドする方法

Vue は、v-bind ディレクティブを通じてクラス名とスタイルを動的にバインドできます。クラス名をバインドするには、v-bind:class ディレクティブを使用してオブジェクトまたは配列を渡します。オブジェクトの true 値は、スタイルをバインドするために要素に追加されることを意味し、v-bind を使用します。 :style ディレクティブはオブジェクトとオブジェクト キーを渡します。値は属性値を表します。v-bind 命令は配列値を渡すこともでき、各配列要素はオブジェクトまたは文字列になります。バインドされたデータ値が変更されると、Vue は要素のクラス名やスタイルを自動的に更新し、コンポーネントの状態やユーザーの操作に基づいて要素の外観を変更します。

Vue でのクラスとスタイルの動的バインド

Vue では、v-bind ディレクティブを使用してクラス名とスタイルを動的にバインドできます。

クラス名をバインドする

クラス名を動的にバインドするには、v-bind:class ディレクティブを使用し、オブジェクトまたは配列を値として渡すことができます。オブジェクトの値が true の場合、対応するクラス名が要素に追加されます。 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>

上記のコード ブロックでは、isActive の値が true の場合、active クラスが <div> に追加されます。要素 。

スタイルのバインド

スタイルを動的にバインドするには、v-bind:style ディレクティブを使用し、オブジェクトを値として渡すことができます。オブジェクトのキーは CSS プロパティを表し、その値はプロパティの値を表します。 🎜rrreee🎜 上記のコード ブロックでは、<div> 要素の color 属性は赤に設定され、font-size 要素は赤に設定されます。 > 属性は 20 ピクセルに設定されます。 🎜🎜🎜配列値の使用🎜🎜🎜v-bind:class ディレクティブと v-bind:style ディレクティブは、配列値を渡すこともできます。配列内の各要素はオブジェクトまたは文字列である必要があります。 🎜rrreee🎜🎜データの変更に応答する🎜🎜🎜バインドされたデータ値が変更されると、Vue は要素のクラス名またはスタイルを自動的に更新します。これにより、コンポーネントの状態やユーザーの操作に基づいて要素の外観を変更できるため、クラス名とスタイルの動的バインディングが非常に便利になります。 🎜

以上がVue でクラスとスタイルを動的にバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。