Vue.js綁定HTML class數組語法錯誤的原因分析_javascript技巧

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 }]">

渲染為：

<div class="class-a classB">

如果是短橫符這樣的 class-b 是不成功的，所以這裡還是要用標準的對象文法加上引號

<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">

渲染為：

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

以上所述是小編給大家介紹的Vue.js綁定HTML class數組語法錯誤，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！