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