Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤的原因分析
Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤，詳情如下所示：
昨天在官網(wǎng)教程上發(fā)現(xiàn)一個(gè)錯(cuò)誤是這樣的，下面看圖
http://cn.vuejs.org/guide/class-and-style.html
當(dāng)有多個(gè)條件class時(shí)這樣寫(xiě)有些繁瑣。在1.0.19+中，可以在數(shù)組語(yǔ)法中使用對(duì)象語(yǔ)法：
如果這樣寫(xiě)是可以執(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)的對(duì)象語(yǔ)法加上引號(hào)
<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">
渲染為：
<div class="class-a class-b">
以上所述是小編給大家介紹的Vue.js綁定HTML class數(shù)組語(yǔ)法錯(cuò)誤，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue動(dòng)態(tài)組件?component?:is的使用代碼示范
vue?動(dòng)態(tài)組件用于實(shí)現(xiàn)在指定位置上，動(dòng)態(tài)加載不同的組件，這篇文章主要介紹了Vue動(dòng)態(tài)組件?component?:is的使用,需要的朋友可以參考下2023-09-09
vue3中storeToRefs讓store中的結(jié)構(gòu)出來(lái)的數(shù)據(jù)也能變成響應(yīng)式(推薦)
這篇文章主要介紹了vue3中storeToRefs讓store中的結(jié)構(gòu)出來(lái)的數(shù)據(jù)也能變成響應(yīng)式,本文通過(guò)實(shí)例代碼給大家介紹的分需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue輕松實(shí)現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3中的極致防抖/節(jié)流詳解(附常見(jiàn)方式防抖/節(jié)流)
在JavaScript中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中極致防抖/節(jié)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue?require.context()的用法實(shí)例詳解
require.context是webpack提供的一個(gè)api,通常用于批量注冊(cè)組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行
今天小編就為大家分享一篇關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue 項(xiàng)目代理設(shè)置的優(yōu)化
這篇文章主要介紹了Vue 項(xiàng)目代理設(shè)置的優(yōu)化功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue3管理后臺(tái)項(xiàng)目使用高德地圖選點(diǎn)的實(shí)現(xiàn)
本文主要介紹了Vue3管理后臺(tái)項(xiàng)目使用高德地圖選點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue?props?type設(shè)置多個(gè)類型，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04