vue動態(tài)綁定多個class以及帶上三元運算或其他條件
更新時間：2022年04月06日 14:56:53 作者：泥子君
這篇文章主要介紹了vue動態(tài)綁定多個class以及帶上三元運算或其他條件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)綁定多個class帶上三元運算或其他條件
動態(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>實現(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(其中包含三元表達式)的寫法
1.數(shù)組形式
<div :class='["classify",current=="0" ? "active" : ""]' ?@click='current=0'>課程</div>
注意：數(shù)組中的classify如果不加引號的話，代表的是data中的一項，并不是類名，將classify加上雙引號，變成字符串就可以變成類名
2.字符串拼接
<div :class="'classify'+(current=='0'?' active':'')" ?@click='current=0'>課程</div>
注意：active前要加一個空格（必須有），字符串拼接時，兩個字符串之間要有空格
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何動態(tài)修改meta的title，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
其實采用vueUse中的useVirtualList方法同樣可以實現(xiàn)虛擬列表,這篇文章小編就來和大家詳細介紹一下如何使用vueUse實現(xiàn)簡單的虛擬列表效果吧2024-04-04
這篇文章主要介紹了vue input實現(xiàn)點擊按鈕文字增刪功能,涉及基于vue.js的事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了一份超級詳細的Vue-cli3.0使用教程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
鼠標(biāo)移入時的小手、鼠標(biāo)點擊時按鈕下壓彈起的動畫、觸屏應(yīng)用點擊時的屏幕震動，這些效果也被統(tǒng)稱為點擊反饋，雖然看似是應(yīng)用中的細枝末節(jié)，但是只要稍微投入一點點心思，帶來的用戶體驗提升是十分明顯的,這里作者為小伙伴們推薦一種作者最喜歡的點擊反饋效果。2021-05-05
vue3?使用defineAsyncComponent與component標(biāo)簽實現(xiàn)動態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實現(xiàn)動態(tài)渲染組件,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue 組件使用中的一些細節(jié)點，大概有兩大細節(jié)點，本文通過基礎(chǔ)實例給大家介紹的非常詳細，需要的朋友參考下吧2018-04-04
這篇文章主要為大家詳細介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值，監(jiān)聽源必須是一個getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12