Vue は CSS スタイルを変更します

Vue は、開発者が複雑な Web アプリケーションを構築するのに役立つ人気のある JavaScript フレームワークです。 Vue は、動的なユーザー インターフェイスの構築を容易にする便利な機能とツールのセットを提供します。 CSSのスタイルを簡単に変更できるのも特徴の1つです。

Vue では、v-bind ディレクティブを使用して CSS スタイルを動的にバインドできます。 v-bind ディレクティブは、Vue インスタンスのデータ属性を DOM 要素の属性にバインドできます。たとえば、v-bind:class ディレクティブを使用して、CSS クラス名を動的にバインドできます。具体的な使用法は次のとおりです。

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

上の例では、isActive は Vue インスタンスのプロパティです。 isActive が true の場合、div 要素の class 属性には「アクティブ」クラス名が含まれます。それ以外の場合、クラス名は含まれません。

オブジェクト リテラルを使用してクラス名を設定するだけでなく、計算プロパティを使用してクラス名の文字列を返すこともできます。たとえば、次のとおりです。

<div v-bind:class="classObject"></div>

data: {
  isActive: true
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      'text-danger': !this.isActive
    }
  }
}

上記の例では、classObject は計算プロパティです。 isActive プロパティの値に基づいてオブジェクト リテラルを返します。オブジェクトには、active と text-danger の 2 つのプロパティが含まれます。 isActive が true の場合、classObject は { active: true, 'text-danger': false } を返し、div 要素の class 属性には「active」クラス名が含まれます。それ以外の場合は、{ active: false, 'text-危険': true }、div 要素の class 属性には、「text-danger」クラス名が含まれます。

クラス名を動的にバインドすることに加えて、v-bind:style ディレクティブを使用してインライン スタイルを動的にバインドすることもできます。 v-bind:style は、Vue インスタンスの data 属性を DOM 要素の style 属性にバインドできます。たとえば、v-bind:style ディレクティブを使用して、背景色を動的にバインドできます。具体的な使用法は次のとおりです。

<div v-bind:style="{ backgroundColor: color }"></div>

上の例では、color は Vue インスタンスのプロパティです。 colorを「red」に設定すると、div要素の背景色が赤になります。

オブジェクト リテラルを使用してインライン スタイルを設定するだけでなく、計算プロパティを使用して、複数のスタイル プロパティを含むオブジェクト リテラルを返すこともできます。たとえば:

<div v-bind:style="styleObject"></div>

data: {
  textColor: 'red',
  fontSize: 16
},
computed: {
  styleObject: function () {
    return {
      color: this.textColor,
      fontSize: this.fontSize + 'px'
    }
  }
}

上記の例では、styleObject はtextColor プロパティと fontSize プロパティの値に基づいてオブジェクト リテラルを返す計算プロパティ。オブジェクトには、color と fontSize という 2 つのスタイル プロパティが含まれます。 textColor が "red" で fontSize が 16 の場合、styleObject は { color: 'red', fontSize: '16px' } を返し、 div 要素の style 属性にはこれら 2 つの style 属性が含まれます。

要約すると、Vue には v-bind:class と v-bind:style という 2 つの命令が用意されており、これらを使用すると CSS スタイルを動的に簡単に変更できます。これらのディレクティブは、Vue インスタンスのプロパティと計算されたプロパティに基づいてクラス名とインライン スタイルを動的に設定できるため、Web アプリケーションの対話性とユーザー エクスペリエンスが向上します。

以上がVue は CSS スタイルを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。