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

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

昨日公式 Web サイトのチュートリアルでこのようなエラーを見つけました。下の図を参照してください

http://cn.vuejs. org/guide/class -and-style.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">

横文字のような短い Class-b は失敗するため、引用符付きの標準オブジェクト構文を使用する必要があります

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

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

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