Vue.jsはclassを動的にバインドし、各色の花の需要を実現する

プロジェクトでは、classを動的に切り替える必要があることがよくあります.例えば、画像をクリックして拡大したり、項目を選択して色を変えたり、皮膚を変える機能を実現したりします.このときvueのダイナミックclassは私たちを助けることができます.
オブジェクト制御classの使用

boolean制御

在上面的语法中，active是class的名字，isActive是一个控制class动态展示的boolean值。当然以上是对象控制class最简单的用法。

• 多个boolean控制多个class。我们可以将它扩展成如下的样子以达到更复杂的样式控制。

data: {
  isActive: true,
  hasError: false
}

またはダイレクトパスオブジェクト

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

オブジェクトでclassをboolean値で制御する

computedにてスタイル

を制御する.

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

計算属性においてclassObjectが見られ,isActiveとerrorの値を変更することでclassを動的に制御する効果を達成できる.
配列制御classの使用

classリスト

を適用するために、配列をv-bind:classに渡すことができます.

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

上記のコードは、次のようにレンダリングされます.

配列でスタイルを動的に切り替えるには、3つの演算子:

を使用します.

配列とオブジェクトを組み合わせて使用することもできます:

使い方が多いので、普段はこんなに多くの使い方ができませんが、最もよく使われているのは以下のようなものです.
この2つの方法をマスターすれば、ほとんどのシーンに対応するのに十分です.
ご注目ありがとうございます~