vue如何动态设置class、动态设置style
作者：徐_三岁
这篇文章主要介绍了vue如何动态设置class、动态设置style，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue动态设置class、style
//动态class对象
<div :class="{ 'isActive': true, 'red': isRed }"></div>
//动态style对象
<div :style="{ color: bgColor, fontSize: '18px' }"></div>
//动态class数组
<div :class="['is-active', isRed ? 'red' : '' ]"></div>
//动态style数组
<div :style="[{ color: bgColor, fontSize: '18px' }, { fontWeight: '500' }]"></div>vue动态添加样式 :style 和 :class
动态添加可以采用：class 也可以采用：style
但是在一个长期维护的项目里面：style行内样式尽量避免。
<template>
<div>
<h2>动态添加类名</h2>
<!-- 第一种方式:对象的形式 -->
<!-- 第一个参数 类名， 第二个参数：boolean值 -->
<!-- 对象的形式: 用花括号包裹起来，类名用引号， -->
<!-- 优点: 以对象的形式可以写多个，用逗号分开 -->
<p :class="{'sm' : true}">对象的形式</p>
<p :class="{'sm' : false, 'lg': true}">对象的形式</p>
<!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号-->
<p :class="[ controller.summary? 'sm' : 'lg' ]" >三元表示式</p>
<!-- 第三种方式: 数组的形式 -->
<p :class="[isTrue, isFalse]">数组的形式</p>
<!-- 数组中用对象 -->
<p :class="[{'sm': false}, isFalse]">数组中使用对象</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动态添加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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。