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