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