Analyse der Ursachen von Syntaxfehlern beim Binden von HTML-Klassen-Arrays in Vue.js

Vue.js-Bindungs-HTML-Klassen-Array-Syntaxfehler, die Details lauten wie folgt:

Ich habe gestern im offiziellen Website-Tutorial einen Fehler wie diesen gefunden, siehe Bild unten

http ://cn.vuejs.org/guide/class-and-style.html

So zu schreiben ist etwas umständlich, wenn es mehrere bedingte Klassen gibt. In 1.0.19+ können Sie die Objektsyntax in der Array-Syntax verwenden:

Wenn es so geschrieben wird, kann es erfolgreich ausgeführt werden, es treten jedoch Fehler auf

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

wird wie folgt gerendert:

<div class="class-a classB">

Wenn es sich um einen Bindestrich handelt, ist Klasse B nicht erfolgreich, daher gilt der Standard weiterhin hier verwendet Die Objektsyntax mit Anführungszeichen

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

wird wie folgt wiedergegeben:

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