Analysis of the causes of syntax errors in binding HTML class arrays in Vue.js

Vue.js has a syntax error in binding HTML class array, the details are as follows:

I found an error like this on the official website tutorial yesterday, see the picture below

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

This is a bit cumbersome to write when there are multiple conditional classes. In 1.0.19+, object syntax can be used in array syntax:

If written like this, it can be executed successfully, but there is an error

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

is rendered as:

<div class="class-a classB">

If it is short Class-b such as horizontal characters is unsuccessful, so we still need to use standard object syntax with quotation marks

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

Rendered as:

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