vue中的class和style是支持變量和方法的榔昔；
直接上代碼
<template>
<div id="root">
<div :class="['red', 'bold']">數(shù)組綁定多個(gè)class</div>
<div :class="[{red: isActive}, 'f30']" @click="isActive=!isActive">點(diǎn)我變色</div>
<div :class="[showRed(), 'bold']">數(shù)組包含方法綁定class</div>
<br/>
<div :style="[red_f30, weight]">數(shù)組綁定多個(gè)變量style--<span @click="fun_x()">點(diǎn)我</span></div>
<div :style="[red_f30,mx()]">數(shù)組包含變量+方法綁定style</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: false,
red_f30: {
color: "red",
fontSize:"30px"
},
weight: {
fontWeight: "bold"
}
};
},
methods: {
showRed() {
return "blue";
},
mx() {
return {
...this.weight,
fontSize: "20px"
};
},
fun_x(){
const yellow={
color: "yellow",
fontSize:"22px"
}
this.red_f30=yellow
}
}
};
</script>
<style scoped>
#root{
line-height: 50px;
}
.red{
color:red;
}
.blue{
color:cornflowerblue;
}
.bold{
font-weight: bold;
}
.f30{
font-size:30px;
}
</style>
