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

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

It is a bit cumbersome to write like this when there are multiple conditional classes. In 1.0.19+, you can use object syntax in array syntax:

If you write it 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 }]">

Rendered as:

<div class="class-a classB">

If it is a dash like class-b, it is unsuccessful, so you still need to use standard object syntax with quotes

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

Rendered as:

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

The above is the Vue.js binding HTML class array syntax error introduced by the editor. I hope it will be helpful to everyone. If you have any If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles analyzing the causes of syntax errors in Vue.js binding HTML class arrays, please pay attention to the PHP Chinese website!