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)文章

vue2.x雙向數(shù)據(jù)綁定原理解析
雙向數(shù)據(jù)綁定原理主要運(yùn)用了發(fā)布訂閱模式來實(shí)現(xiàn)的，通過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)的事件，本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧
2022-01-01
vuejs路由的傳參及路由props配置詳解
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作
這篇文章主要介紹了Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
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)目打包問題
這篇文章主要介紹了vue cli構(gòu)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問題,需要的朋友可以參考下
2018-02-02
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue實(shí)現(xiàn)web分頁(yè)組件詳解
這篇文章主要為大家詳細(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)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue項(xiàng)目使用electron進(jìn)行打包操作的全過程
我們都知道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)行打包操作的全過程,需要的朋友可以參考下
2023-03-03