vue如何動態(tài)設置class、動態(tài)設置style
更新時間：2022年10月17日 10:19:34 作者：徐_三歲
這篇文章主要介紹了vue如何動態(tài)設置class、動態(tài)設置style，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue動態(tài)設置class、style
//動態(tài)class對象
<div :class="{ 'isActive': true, 'red': isRed }"></div>
//動態(tài)style對象
<div :style="{ color: bgColor, fontSize: '18px' }"></div>
//動態(tài)class數(shù)組
<div :class="['is-active', isRed ? 'red' : '' ]"></div>
//動態(tài)style數(shù)組
<div :style="[{ color: bgColor, fontSize: '18px' }, { fontWeight: '500' }]"></div>vue動態(tài)添加樣式 :style 和 :class
動態(tài)添加可以采用：class 也可以采用：style
但是在一個長期維護的項目里面：style行內樣式盡量避免。
<template>
<div>
<h2>動態(tài)添加類名</h2>
<!-- 第一種方式:對象的形式 -->
<!-- 第一個參數(shù) 類名， 第二個參數(shù)：boolean值 -->
<!-- 對象的形式: 用花括號包裹起來，類名用引號， -->
<!-- 優(yōu)點: 以對象的形式可以寫多個，用逗號分開 -->
<p :class="{'sm' : true}">對象的形式</p>
<p :class="{'sm' : false, 'lg': true}">對象的形式</p>
<!-- 第二種方式:三元表達式 注意點：放在數(shù)組中，類名要用引號-->
<p :class="[ controller.summary? 'sm' : 'lg' ]" >三元表示式</p>
<!-- 第三種方式: 數(shù)組的形式 -->
<p :class="[isTrue, isFalse]">數(shù)組的形式</p>
<!-- 數(shù)組中用對象 -->
<p :class="[{'sm': false}, isFalse]">數(shù)組中使用對象</p>
<!--補充: class中還可以傳方法，在方法中返回類名-->
<p :class="setClass">通過方法設置class類名</p>
</div>
//-選中的一項更換背景色，其余兄弟元素沒有背景色
<ul class="options-box">
<li v-for="(item,index) in hours"
:key="index" @click="selectHour(item,index)"
:class="{selected:readySelectHour === index}">
<span>{{item.name}}</span>
</li>
</ul>
</template><script>
export default {
data () {
return {
isTrue: 'sm',
isFalse: 'lg'
}；
}，
method: {
setclass () {
return 'sm';
},
selectHour(itemhour,index){
this.hour = itemhour.name;
this.readySelectHour = index;
},
}
}
</script><style scoped>
.sm {
padding-top:10px;
}
.lg {
padding-top:20px;
}
li{
text-align: center;
line-height: 32px;
font-size: 12px;
&:hover {
background-color:#f8f9fa;
}
&.selected{
background-color: #e6fff7;
}
}
</style>其次還可以用 :style
給一個div動態(tài)添加padding-top 我們可以用上面的：class方法 也可以用：style 的方法
還是以上面的class樣式為例
:style如下
<div class="controller" :style="{paddingTop:controller.summary?'20px':'10px'}"></div>:class如下
<div class="controller" :class="[controller.summary? 'lg':'sm']"></div>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue打包生成的文件的js文件過大的優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的實例代碼
這篇文章主要介紹了vue+render+jsx實現(xiàn)可編輯動態(tài)多級表頭table的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的工作或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了使用vue打包進行云服務器上傳，本文給大家介紹的非常詳細，對大家的工作或學習具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue、uniapp實現(xiàn)組件動態(tài)切換效果
在Vue中，通過使用動態(tài)組件，我們可以實現(xiàn)組件的動態(tài)切換，從而達到頁面的動態(tài)展示效果，這篇文章主要介紹了vue、uniapp實現(xiàn)組件動態(tài)切換,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下2023-06-06
Vue2.0基于vue-cli+webpack父子組件通信(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
圖形驗證碼是一種常見的安全措施,用于防止自動化軟件（機器人）濫用網(wǎng)站資源,如自動提交表單,這篇文章主要介紹了在uniapp中實現(xiàn)圖形驗證碼的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
vue.js實現(xiàn)的經(jīng)典計算器/科學計算器功能示例
這篇文章主要介紹了vue.js實現(xiàn)的經(jīng)典計算器/科學計算器功能,具有基本四則運算計算器以及科學計算器的功能,可實現(xiàn)開方、乘方、三角函數(shù)以及公式運算等功能,需要的朋友可以參考下2018-07-07