Vueでクラス名を動的に追加する方法を詳しく解説-Vue.js-php.cn

Vueでクラス名を動的に追加する方法を詳しく解説

動的なクラス名をコンポーネントに追加できることは、非常に強力な機能です。これにより、カスタムテーマを作成したり、コンポーネントの状態に基づいてクラスを追加したり、スタイルに依存するコンポーネントのさまざまなバリエーションを作成したりすることが容易になります。

動的クラス名の追加は、prop :class="classname" をコンポーネントに追加するのと同じくらい簡単です。 classname が何に評価されるかは、コンポーネントに追加されるクラス名になります。

もちろん、Vue の動的クラスを使用してできることはさらにたくさんあります。この記事では、次のことについて詳しく説明します。

Vue での静的クラスと動的クラスの使用
正規の JS 式を使用してクラスを評価する方法
配列構文動的クラス名の場合
オブジェクト構文
クラス名をすばやく生成する
カスタムコンポーネントで動的クラス名を使用する方法

静的クラスと動的クラス

Vue では、静的クラスと動的クラスをコンポーネントに追加できます。

静的クラスは決して変更されない退屈なクラスであり、コンポーネント内に常に存在します。一方、アプリケーションに動的クラスを追加したり削除したりすることもできます。

静的クラスの追加は、通常の HTML での追加とまったく同じです

<template>
  <span class="description">
    This is how you add static classes in Vue.
  </span>
</template>

ログイン後にコピー

動的クラスは非常に似ていますが、Vue の特別な属性構文 v-bind## を使用する必要があります#、JS 式をクラスにバインドするには:

<template>
  <span v-bind:class="&#39;description&#39;">
    This is how you add static classes in Vue.
  </span>
</template>

ログイン後にコピー

ここで、動的クラス名の前後に追加の引用符を追加する必要があることがわかります。

これは、

v-bind 構文が JS 値として渡すものをすべて受け入れるためです。引用符を追加すると、Vue がそれを文字列として扱うようになります。

Vue には、

v-bind:

<template>
  <span :class="&#39;description&#39;">
    This is how you add static classes in Vue.
  </span>
</template>

ログイン後にコピー

の短縮構文もあります。本当に素晴らしいのは、同じコンポーネント上に静的クラスと動的クラスの両方を含めることもできることです。静的クラスは、位置やレイアウトなど、変更されないとわかっているコンテンツに使用され、動的クラスはテーマなどに使用されます。

<template>
  <span    class="description"
    :class="theme"
  >
    This is how you add static classes in Vue.
  </span>
</template>

export default {
  data() {    return {
      theme: &#39;blue-theme&#39;,
    };
  }
};
----------------------------------------
.blue-theme {
  color: navy;
  background: white;
}

ログイン後にコピー

この場合、

theme がコンテンツです。クラス名の変数を適用します。

条件付きクラス名

v-bind は任意の JS 式を受け入れることができるため、これを使用して非常に優れた処理を行うことができます。私のお気に入りは、テンプレートで三項式を使用することです。これは非常にクリーンで読みやすい傾向があります。

<template>
  <span    class="description"
    :class="darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

ログイン後にコピー

darkMode が true の場合、dark-theme がクラス名として使用されます。それ以外の場合は、ライトテーマを選択します。

配列構文を使用する

多くの異なるクラスを動的に追加する必要がある場合は、配列またはオブジェクトを使用できます。どちらのメソッドも便利です。最初に配列メソッドを見てみましょう。

ここでは JS 式を計算しているだけなので、学習した式を配列構文と組み合わせることができます

<template>
  <span    class="description"
    :class="[
      fontTheme,
      darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

ログイン後にコピー

配列を使用して、この要素名に 2 つの動的クラスを設定します。

fontTheme の値は、フォントの外観を変更するクラス名です。前の例では、darkMode 変数を使用して、dark-theme と light-theme を切り替えることができます。

オブジェクト構文の使用

オブジェクトを使用して動的クラスのリストを定義することもできるため、柔軟性が高まります。

値が true のキーと値のペアの場合、そのキーをクラス名として使用します。オブジェクト構文の例を見てみましょう。

<template>
  <span    class="description"
    :class="{
      &#39;dark-theme&#39;: darkMode,
      &#39;light-theme&#39;: !darkMode,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

ログイン後にコピー

オブジェクトには、

dark-theme と light-theme という 2 つのキーが含まれています。以前に実装したロジックと同様に、darkMode の値に基づいてこれらのテーマを切り替えたいと考えています。

darkMode が true の場合、dark-theme が動的クラス名として要素に適用されます。ただし、!darkMode 値が false であるため、light-them は適用されません。

これで、Vue コンポーネントにクラスを動的に追加する基本を説明しました。では、独自のカスタムコンポーネントを使用してこれを行うにはどうすればよいでしょうか?

カスタムコンポーネントで使用する

アプリにカスタムコンポーネントがあると仮定します

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
  />
</template>

ログイン後にコピー

テーマ管理を変更するクラスを動的に追加したい場合はどうすればよいですか?実はとても簡単です。

前と同じように

:class 属性を追加するだけです。

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  />
</template>

ログイン後にコピー

これが機能する理由は、Vue が

MovieList## のルート要素に直接配置されているためです。 # クラスをセットアップします。コンポーネントに

props

を設定すると、Vue はこれらのプロパティを、コンポーネントの props セクションで指定されたプロパティと比較します。一致するものがあれば、通常の小道具として渡されます。それ以外の場合、Vue はそれをルート DOM 要素に追加します。ここで、

MovieList

は class 属性を指定していないため、Vue はルート要素に設定する必要があることを認識しています。ただし、動的クラス名を使用すると、さらに高度な処理を行うことができます。

クラス名をすばやく生成する

クラス名を動的に追加または削除するさまざまな方法を取り上げてきました。しかし、動的に生成されたクラス名自体はどうなるのでしょうか?

さまざまな種類のボタンすべてに 20 の異なる CSS スタイルを提供する

Button

コンポーネントがあるとします。 <p>你可能不想花一整天的时间把每一项都写出来，也不想把开关的逻辑都写出来。相反，我们将动态生成要应用的类的名称。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><template> <span class="description" :class="theme" > This is how you add static classes in Vue. </span> </template> export default { data() { return { theme: &#39;blue-theme&#39;, }; } }; .blue-theme { color: navy; background: white; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对<code>Button组件执行此操作，则可以执行以下简单操作：

<template>
  <button
    @click="$emit(&#39;click&#39;)"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: &#39;default&#39;,
    }
  }
};

.default {}

.primary {}

.danger {}

ログイン後にコピー

现在，使用Button组件的任何人都可以将theme属性设置为他们想要使用的任何主题。

如果没有设置任何类，它将添加.default类。如果将其设置为primary，则会添加.primary类。

使用计算属性来简化类

最终，模板中的表达式将变得过于复杂，并将开始变得非常混乱和难以理解。幸运的是，我们有一个简单的解决方案，就是使用计算民属性：

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="class"
  />
</template>

export default {
  computed: {
    class() {
      return darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;;
    }
  }
};

ログイン後にコピー

这不仅易于阅读，而且还可以轻松添加新功能并在将来进行重构。