Vue.js綁定HTML class陣列語法錯誤的原因分析

Vue.js綁定HTML class陣列語法錯誤，詳情如下圖：

昨天在官網教學上發現一個錯誤是這樣的，下面看圖

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

當有多個條件class時這樣寫有些繁瑣。在1.0.19+中，可以在陣列語法中使用物件語法：

如果這樣寫是可以執行成功的，但有錯誤

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

   

渲染為：rrrereee

橫符這樣的class-b 是不成功的，所以這裡還是要用標準的物件文法加上引號

<div class="class-a classB">

   

渲染為：

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

   

渲染為：

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

   

渲染為：

rrreee

   

渲染為：

rrreee🎜