vue中動態(tài)添加class類名的方法
更新時間：2018年09月05日 09:36:25 作者：garyHoH
今天小編就為大家分享一篇vue中動態(tài)添加class類名的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue 動態(tài)添加class類名，靈活得讓你發(fā)狂，下面示例幾個
<template>
<div>
<h2>動態(tài)添加類名</h2>
<!-- 第一種方式:對象的形式 -->
<!-- 第一個參數(shù) 類名， 第二個參數(shù)：boolean值 -->
<!-- 對象的形式: 用花括號包裹起來，類名用引號， -->
<!-- 優(yōu)點: 以對象的形式可以寫多個，用逗號分開 -->
<p :class="{'p1' : true}">對象的形式(文字的顏色)</p>
<p :class="{'p1' : false, 'p': true}">對象的形式(文字的顏色)</p>
<!-- 第二種方式:三元表達(dá)式 注意點：放在數(shù)組中，類名要用引號-->
<p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的顏色)</p>
<!-- 第三種方式: 數(shù)組的形式 -->
<p :class="[isTrue, isFalse]">數(shù)組的形式(文字的顏色)</p>
<!-- 數(shù)組中用對象 -->
<p :class="[{'p1': false}, isFalse]">數(shù)組中使用對象(文字的顏色)</p>
<!--補充: class中還可以傳方法，在方法中返回類名-->
<p :class="setClass">通過方法設(shè)置class類名</p>
</div>
</template>
<script>
export default {
data () {
return {
isTrue: 'p1',
isFalse: 'p'
}；
}，
method: {
setclass () {
return 'p1';
}
}
}
</script>
<style scoped>
.p1 {
color: red;
font-size: 30px;
}
.p {
color: blue
}
</style>
以上這篇vue中動態(tài)添加class類名的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中過濾器的作用可被用于一些常見的文本格式化,也就是修飾文本,但是文本內(nèi)容不會改變,下面這篇文章主要給大家介紹了關(guān)于VUE中filters過濾器的兩種用法,需要的朋友可以參考下2022-04-04
使用vue編寫h5公眾號跳轉(zhuǎn)小程序的實現(xiàn)代碼
這篇文章主要介紹了使用vue編寫h5公眾號跳轉(zhuǎn)小程序,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue 打包后找不到dist文件夾的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法
這篇文章主要介紹了在Vue項目中實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
分頁是很多頁面都需要實現(xiàn)的一個功能，這篇文章主要介紹了Vue全局分頁組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了vue中虛擬DOM與Diff算法知識的圖文精講，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
今天小編就為大家分享一篇在Vue mounted方法中使用data變量詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02