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, { 'class-b': isB, 'class-c': isC }]">
<div class="class-a class-b">
rrreee
渲染為: