Vue で className として空の文字列を使用することはなぜ推奨されないのですか?

三項式を使用して DOM 要素のクラスを設定する場合、空の文字列を使用すると、値がレンダリングされない空のクラスが作成されます。これを回避するには、空の文字列の代わりに null を使用します。

<!-- ❌ -->
<div :class="isBold ? '太字' : ''">
<!-- <div クラス> -->

<!-- ✅ -->
<div :class="isBold ? '太字' : null">
<!-- <div> -->

空の文字列 '' と null を比較する

上記の2行のコードを分析し続けます

ケース1: 空の文字列を使用する ''

三項演算子を使用して、クラスを要素にバインドするかどうかを決定します。isBold が true の場合は、bold を返します。それ以外の場合は、'' を返します。

<div :class="isBold ? '太字' : ''"></div>

データ（） {
  戻る {
    太字: false
  }
}

このときのレンダリング結果は以下のようになります

<div クラス></div>
<!-- 😱 空のクラス -->

isBoldがtrueの場合、レンダリング結果は次のようになります。

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

ケース2: nullの使用

nullを使用したレンダリング結果を見る

<div :class="isBold ? '太字' : null"></div>

データ（） {
  戻る {
    太字: false
  }
}

レンダリング結果は次のとおりです

<div></div>
<!-- ✅ 非常に良い、空のクラスはありません>

isBoldがfalseの場合、レンダリング結果は次のようになります。

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

ケース3: undefinedの使用

undefinedはnullと同じ効果を持つ

<div :class="isBold ? '太字' : 未定義"></div>

<div></div>
<!-- ✅ 非常に良い、空のクラスはありません>

False値について

isBoldの値が次の場合、三項式も偽値を返します。

間違い
未定義
ヌル
非N
0
"" または '' または `` (空の文字列)

オブジェクトを使用してクラスをバインドする

オブジェクトを使用すると読みやすくなります

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

しかし、三項式が最も適しているのは、複雑なクラスをバインドするときです。

<div :class="isActive ? '下線太字' : null"></div>

&& を使用してクラスをバインドする

別の状況を見てみましょう

<div :class="isBold && '太字'"></div>

&& は論理演算子であるだけでなく、値を返すこともできます。上記のコードのように、isBold が true の場合は bold を返しますが、isBold が false の場合はどうなるでしょうか。

ケース1: isBold が false

<div :class="isBold && '太字'"></div>

今回は空のクラスが返されます。

<div クラス></div>

ケース2: isBold が null である

<div :class="isBold && '太字'"></div>

nullの場合、空のクラスは存在しません

<div></div>

ケース3: isBold が未定義

<div :class="isBold && '太字'"></div>

定義されていない場合は空のクラスは存在しません

<div></div>

上記の状況は && によって発生したものではなく、判断を行って値を返すためだけに使用されています。

したがって、&& を使用するときに空のクラスが返されることを避けたい場合は、null または undefined を使用するのが最適です。

ただし、クラスを設定するには、オブジェクトまたは配列バインディング構文を使用することをお勧めします。

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

W#C 標準では、空のクラスも許可されます。

<!-- エラーなし -->
<div クラス>...</div>

<!-- エラーなし -->
<div>...</div>

HTML 構文では空の属性の使用は禁止されていません。

ただし、コードの読みやすさのために、特に DOM 属性を操作して判断する必要がある場合は、空の属性を使用しないことをお勧めします。

空のプロパティは微妙なエラーを引き起こす可能性がある

e.target.classList

e.クラス名

画像ソース

...

しかし...
空の ID 属性は許可されません。

<!-- エラー -->
<div id>...</div>

<!-- エラー -->
<div id="">...</div>

<!-- 正解 -->
<div id="name">...</div>

❌ エラー: ID は空の文字列であってはなりません。

これで、vue で空の文字列を className として使用することが推奨されない理由についての説明は終わりです。vue で空の文字列を className として使用することの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。