Vue.js で HTML クラス配列をバインドする際の構文エラーの原因の分析

Vue.js は HTML クラスの配列をバインドする際に構文エラーがあります。 詳細は次のとおりです。

条件付きクラスが複数ある場合、このように書くのは少し面倒です。 1.0.19 以降では、配列構文でオブジェクト構文を使用できます:

このように書くと、正常に実行できますが、エラーが発生します

data: {
classA: 'class-a',
classB: 'class-b',
classC: 'class-c',
isB: true,
isC: false
}
<div :class="[classA, { classB: isB, classC: isC }]">

次のようにレンダリングされます:

<div class="class-a classB">

If itはこのようなダッシュです class-b は失敗するため、ここでも引用符付きの標準オブジェクト構文を使用する必要があります

<div :class="[classA, { &#39;class-b&#39;: isB, &#39;class-c&#39;: isC }]">

は次のようにレンダリングされます:

<div class="class-a class-b">

上記は、 によって導入された Vue.js バインディング HTML クラスです。エディター。配列の構文エラーです。ご質問があればメッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

Vue.js で HTML クラス配列をバインドする際の構文エラーの原因を分析したその他の関連記事については、PHP 中国語 Web サイトに注目してください。