vue動態(tài)綁定多個class以及帶上三元運(yùn)算或其他條件
更新時間：2022年04月06日 14:56:53 作者：泥子君
這篇文章主要介紹了vue動態(tài)綁定多個class以及帶上三元運(yùn)算或其他條件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)綁定多個class帶上三元運(yùn)算或其他條件
動態(tài)綁定屬性
在v-for循環(huán)中，根據(jù)需求，在10條數(shù)據(jù)里，前3條添加不一樣的樣式。
例子
設(shè)置第一條數(shù)據(jù)的樣式為one
<li v-for="(item,index) in items" :key="index">
?? ?<span :class="index==0?'one':''">{{index+1}}</span>
</li>設(shè)置樣式并判斷
<li v-for="(item,index) in items" :key="index">
?? ?<span :class="[index==0?'one':'','select-active':items.istrue]">{{index+1}}</span>
</li>實(shí)現(xiàn)
<li v-for="(item,index) in items" :key="index">
?? ?<span :class="[index==0?'one':'',index==1?'two':'',index==2?'three':'']">{{index+1}}</span>
</li>一個標(biāo)簽中含有多個class(其中包含三元表達(dá)式)的寫法
1.數(shù)組形式
<div :class='["classify",current=="0" ? "active" : ""]' ?@click='current=0'>課程</div>
注意：數(shù)組中的classify如果不加引號的話，代表的是data中的一項(xiàng)，并不是類名，將classify加上雙引號，變成字符串就可以變成類名
2.字符串拼接
<div :class="'classify'+(current=='0'?' active':'')" ?@click='current=0'>課程</div>
注意：active前要加一個空格（必須有），字符串拼接時，兩個字符串之間要有空格
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue頂部菜單欄實(shí)現(xiàn)小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue上傳文件formData上傳的解決全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
最近工作中遇到個需求,需要實(shí)現(xiàn)個可視化圖表頁的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue 實(shí)現(xiàn)輸入框新增搜索歷史記錄功能
這篇文章主要介紹了Vue 輸入框新增搜索歷史記錄功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
vue下如何利用canvas實(shí)現(xiàn)在線圖片標(biāo)注
這篇文章主要介紹了vue下如何利用canvas實(shí)現(xiàn)在線圖片標(biāo)注，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue中Object.assign清空數(shù)據(jù)報錯的解決方案
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
在前端開發(fā)中,尤其是利用Vue3構(gòu)建現(xiàn)代Web應(yīng)用時,掌握如何使用本地存儲（localStorage）來保存數(shù)據(jù)是非常重要的能力,在這篇博客中,我將詳細(xì)介紹如何在Vue3中使用localStorage保存數(shù)據(jù),并提供示例代碼來幫助理解,需要的朋友可以參考下2024-06-06
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁面在進(jìn)行切換時,原有的路由組件會被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11