快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題
更新時間：2018年09月05日 09:58:15 作者：超神冉
今天小編就為大家分享一篇快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先，直接進入正題，我想要給一個dom綁定多個class，而且是動態(tài)綁定，這個時候可以用v-bind簡寫可以寫為“ ：”冒號，我查了官方的語法，
具體如下：
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
其中第2行和第3行都是采用了數(shù)組語法，所以放到了我本人的代碼中就是這樣寫
<a :class="[{ active : hash==='all' }, nav-link]" href="#/all" rel="external nofollow" >全部任務</a>
不幸的是并沒有任何卵用，這里的nav-link這個class是固定的不會變的，active這個class需要根據(jù)條件來判斷是否要加入。
后來查了很多資料也沒有解決，最后自己對象寫法就成功了，目前看到網(wǎng)上沒有解決的案列，所以分享出來。
具體如下：
<a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >已完成</a>
有疑問的可以在評論中提出或者我有錯誤的也可以說一下。
以上這篇快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue之Vue.use的使用場景，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了VUE預渲染及遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue-cli是一個官方發(fā)布vue.js項目腳手架,使用vue-cli可以快速創(chuàng)建vue項目。本文介紹了vue-cli4.5.x快速搭建項目，感興趣的可以了解一下2021-05-05
在如今，很多網(wǎng)頁已經(jīng)可以手動切換明亮模式和黑暗模式，網(wǎng)頁的主題切換已經(jīng)成為了一個常用的需求，因此，本文將從常見框架的處理方式總結一些相關的操作，對vue?ui框架主題切換功能感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了vue 組件基礎知識的相關資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家介紹了vue之數(shù)據(jù)代理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題，非常不錯，具有參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
Vue+axios+WebApi+NPOI導出Excel文件實例方法
在本篇文章里小編給大家整理關于Vue+axios+WebApi+NPOI導出Excel文件的知識點以及實例代碼，需要的朋友們參考下。2019-06-06
這篇文章主要介紹了7個實用的Vue開發(fā)技巧文。中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面我們來一起學習一下吧2019-05-05
這篇文章主要介紹了@error函數(shù)vue圖片加載失敗空白頁解決方案，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08