首頁 > web前端 > js教程 > 主體

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

高洛峰
發布: 2017-01-12 13:09:41
原創
1542 人瀏覽過

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

當有多個條件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">
登入後複製

渲染為:

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

渲染為這樣的class-b 是不成功的,所以這裡還是要用標準的物件語法加上引號

<div class="class-a class-b">
登入後複製

渲染為:

rrreee🎜🎜🎜以上所述是小編給大家介紹的Vue.js綁定HTML class🎜🎜以上所述是小編給大家介紹的Vue.js綁定HTML class陣列語法錯誤,希望對大家有幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持! 🎜🎜更多Vue.js綁定HTML class數組語法錯誤的原因分析相關文章請關注PHP中文網! 🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板