Vue でクラスを動的にバインドするときに空のクラスを回避する方法について話しましょう。

Vue 動的バインディング クラスで空のクラスを回避するにはどうすればよいですか?次の記事では、Vue でクラスを動的にバインドするときに空クラスを回避する方法を紹介します。

[関連する推奨事項: vuejs ビデオ チュートリアル ]

空の文字列を渡すと、DOM 出力のクラスが null になる可能性があります。三項演算子では、「null」を返すことができます。これにより、DOM 内に空のクラスが存在しないことが保証されます?

<!-- ❌ -->
<div :class="isBold ? &#39;bold&#39; : &#39;&#39;">
<!-- <div class> -->

<!-- ✅ -->
<div :class="isBold ? &#39;bold&#39; : null">
<!-- <div> --

オプション 1: 空の文字列を使用します''

三項演算子を使用して、isBold が true か falsy であるかに基づいて、適切なクラスを条件付きで設定します。次の例では、isBold が true の場合、クラスは bold に設定されます。 仮想値の場合は、空の文字列''を返します。

html

<div :class="isBold ? &#39;bold&#39; : &#39;&#39;"></div>

js

data() {
  return {
    isBold: false
  }
}

最終的なレンダリングは次のようになります:

<div class></div>
<!-- ? 啊！ 空的class -->

If isBold は true で、次のようにレンダリングされます:

<div class="bold"></div>

オプション 2: null

を使用します。次に、次のように指定するかどうかを確認してみましょう。クラスに値 null が割り当てられるとどうなるか。

html

<div :class="isBold ? &#39;bold&#39; : null"></div>

js

data() {
  return {
    isBold: false
  }
}

最終的なレンダリングは次のようになります:

<div></div>
<!-- ✅ Nice, 没有空的 class -->

If isBold は true であり、次のように表示されます:

<div class="bold"></div>

解決策 3: unknown

を使用します ちなみに、unknown も機能します正常に動作していますか?

<div :class="isBold ? &#39;bold&#39; : undefined"></div>

<div></div>
<!-- ✅ Nice, no empty class -->

仮想値

以下は JS の仮想値です。したがって、isBold がこれらの値のいずれかである場合、三項演算子の false の場合が返されます。

false
undefined
null
NaN
0
"" or '' or `` (empty string)

オブジェクト構文を使用したリファクタリング

上記の例では、オブジェクト構文を使用することをお勧めします。

<div :class="{ bold: isBold }"></div>

三項演算子を使用するためのより良いシナリオは、複数のセットアップを行うことです。クラス。

<div :class="isActive ? &#39;underline bold&#39; : null"></div>

Using && Seting Class

別のシナリオを見て、それが機能するかどうかを確認してみましょう。

<div :class="isBold && &#39;bold&#39;"></div>

&& は論理演算子であるだけでなく、実際に値を生成することもできます。したがって、isBold が true の場合、bold が返されます。ただし、isBold が仮想値の場合は、isBold の値が返されます。

最後の点を強調します。isBold の値が返されます。したがって、isBold の値によっては、空のクラスが存在するという元の問題が依然として存在します。いくつかの例を見てみましょう。

例 A: isBold は false

<div :class="isBold && &#39;bold&#39;"></div>

と同じです。これでも空のクラスが表示されますか?

<div class></div>

例 B : isBold は null

<div :class="isBold && &#39;bold&#39;"></div>

に等しい isBold は null なので、空のクラスは消えますか?

<div></div>

&&その通りです。実際、それはその役割を果たしているだけです。特定の戻り値が必要なだけです。他の点では、空のクラスをレンダリングすることはできません。null または undependent を渡す必要があります。これら 2 つ以外の false 値は機能しません。これは見落としやすいので、より明示的な三項演算子を使用するか、それとも単なるオブジェクト構文を使用することをお勧めします。

空のクラス属性が間違っているのでしょうか?

W3C Markup Validation Service を使用して確認してみたところ、両方の構文が実際に合格しました。

<!-- Pass -->
<div class>...</div>

<!-- Pass -->
<div>...</div>

HTML 標準: HTML 標準: 空の属性の構文 を詳しく見てみると、空の属性は許可されていないようです。

ただし...

ただし、この有効性は id には適用されません。空の id は無効と見なされるためです。

<!-- Fail -->
<div id>...</div>

<!-- Fail -->
<div id="">...</div>

<!-- Pass -->
<div id="name">...</div>

❌ エラー: ID を空の文字列にすることはできません。

概要

空のクラスは有効とみなされ、仕様はそれに反対していないため、すべてあなたの選択です。これはあなたのコードベースであり、それをどう扱うかを決めるのはあなたです。 HTML 出力をクリーンな状態に保ちたい場合は、null を Vue 三項演算子に渡すことができます。それがあなたにとって重要でない場合は、忘れてください。ここには正しい答えはありません。すべては好みに依存します?

(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)

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