Vue がクラスを動的にバインドするときに空のクラスを回避する方法!

Vue で動的にバインドされたクラスで空のクラスを回避するにはどうすればよいですか?落とし穴を回避する方法については以下の記事で紹介していますので、ご参考になれば幸いです。

# 空の文字列を渡すと、DOM 出力に空のクラスが含まれる可能性があります。三項演算子では「null」を返すことができ、これにより DOM 内に空のクラスが存在しないことが保証されます。 [関連する推奨事項: "vue.js チュートリアル "]

<!-- ❌ -->
<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 三項演算子に渡すことができます。それがあなたにとって重要でない場合は、忘れてください。ここに正しい答えはありません。すべてはあなたの好みに依存します。

英語の元のアドレス: https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/

著者: Samantha Ming

翻訳者: フロントエンド Xiaozhi

プログラミング関連の知識については、こちらをご覧ください: プログラミング入門 ！ ！

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