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