快捷導(dǎo)航

快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無效的問題

更新時(shí)間：2018年09月05日 09:58:15 作者：超神冉

今天小編就為大家分享一篇快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

首先，直接進(jìn)入正題，我想要給一個(gè)dom綁定多個(gè)class，而且是動(dòng)態(tài)綁定，這個(gè)時(shí)候可以用v-bind簡(jiǎn)寫可以寫為“ ：”冒號(hào)，我查了官方的語(yǔ)法，

具體如下：

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

其中第2行和第3行都是采用了數(shù)組語(yǔ)法，所以放到了我本人的代碼中就是這樣寫

<a :class="[{ active : hash==='all' }, nav-link]" href="#/all" rel="external nofollow" >全部任務(wù)</a>

不幸的是并沒有任何卵用，這里的nav-link這個(gè)class是固定的不會(huì)變的，active這個(gè)class需要根據(jù)條件來判斷是否要加入。

后來查了很多資料也沒有解決，最后自己對(duì)象寫法就成功了，目前看到網(wǎng)上沒有解決的案列，所以分享出來。

具體如下：

<a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >已完成</a>

有疑問的可以在評(píng)論中提出或者我有錯(cuò)誤的也可以說一下。

以上這篇快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無效的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue之Vue.use的使用場(chǎng)景及說明
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
VUE預(yù)渲染及遇到的坑
這篇文章主要介紹了VUE預(yù)渲染及遇到的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue-cli4.5.x快速搭建項(xiàng)目
vue-cli是一個(gè)官方發(fā)布vue.js項(xiàng)目腳手架,使用vue-cli可以快速創(chuàng)建vue項(xiàng)目。本文介紹了vue-cli4.5.x快速搭建項(xiàng)目，感興趣的可以了解一下
2021-05-05
Vue?UI框架的主題切換功能實(shí)現(xiàn)
在如今，很多網(wǎng)頁(yè)已經(jīng)可以手動(dòng)切換明亮模式和黑暗模式，網(wǎng)頁(yè)的主題切換已經(jīng)成為了一個(gè)常用的需求，因此，本文將從常見框架的處理方式總結(jié)一些相關(guān)的操作，對(duì)vue?ui框架主題切換功能感興趣的朋友跟隨小編一起看看吧
2022-12-12
vue 組件基礎(chǔ)知識(shí)總結(jié)
這篇文章主要介紹了vue 組件基礎(chǔ)知識(shí)的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下
2021-01-01
vue之?dāng)?shù)據(jù)代理詳解
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Vue.js 踩坑記之雙向綁定
這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
Vue+axios+WebApi+NPOI導(dǎo)出Excel文件實(shí)例方法
在本篇文章里小編給大家整理關(guān)于Vue+axios+WebApi+NPOI導(dǎo)出Excel文件的知識(shí)點(diǎn)以及實(shí)例代碼，需要的朋友們參考下。
2019-06-06
實(shí)用的Vue開發(fā)技巧
這篇文章主要介紹了7個(gè)實(shí)用的Vue開發(fā)技巧文。中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，下面我們來一起學(xué)習(xí)一下吧
2019-05-05
@error函數(shù)vue圖片加載失敗空白頁(yè)解決方案
這篇文章主要介紹了@error函數(shù)vue圖片加載失敗空白頁(yè)解決方案，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08