vue中動(dòng)態(tài)添加class類名的方法
更新時(shí)間：2018年09月05日 09:36:25 作者：garyHoH
今天小編就為大家分享一篇vue中動(dòng)態(tài)添加class類名的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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)包裹起來(lái)，類名用引號(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">通過(guò)方法設(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)文章
雙向數(shù)據(jù)綁定原理主要運(yùn)用了發(fā)布訂閱模式來(lái)實(shí)現(xiàn)的，通過(guò)Object.defineProperty對(duì)數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02
vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長(zhǎng)按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-01-01
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作
這篇文章主要介紹了Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue cli構(gòu)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問(wèn)題
這篇文章主要介紹了vue cli構(gòu)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問(wèn)題,需要的朋友可以參考下2018-02-02
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)web分頁(yè)組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程
我們都知道Electron項(xiàng)目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實(shí)就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程,需要的朋友可以參考下2023-03-03