Vue.js綁定HTML class數(shù)組語法錯誤的原因分析
更新時間：2016年10月19日 16:09:02 投稿：mrr
Vue.js綁定HTML class數(shù)組語法錯誤有哪些原因?qū)е碌哪?，該如何解決呢？下面小編給大家分享Vue.js綁定HTML class數(shù)組語法錯誤的原因分析，感興趣的朋友一起看看吧
Vue.js綁定HTML class數(shù)組語法錯誤，詳情如下所示：
昨天在官網(wǎng)教程上發(fā)現(xiàn)一個錯誤是這樣的，下面看圖
http://cn.vuejs.org/guide/class-and-style.html
當有多個條件class時這樣寫有些繁瑣。在1.0.19+中，可以在數(shù)組語法中使用對象語法：
如果這樣寫是可以執(zhí)行成功的，但有錯誤
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數(shù)組語法錯誤，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了vue3實現(xiàn)數(shù)字滾動特效實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue build過程取消console debugger控制臺信息輸出方法詳解
這篇文章主要為大家介紹了Vue build過程取消console debugger控制臺信息輸出方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了Vue異步組件處理路由組件加載狀態(tài)的解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
本文主要介紹了Vue中使用Lodash的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
Vue 報錯TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)加載腳本,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08