一、第一种，：style写法，分为直接赋值变量，或者使用CSS样式对象
1.赋值变量
<button :style="buttonStyle">点击</button>
computed: {
buttonStyle() {
return {
backgroundColor: this.clicked ? 'green' : 'blue',
color: 'white',
padding: '10px 20px'
};
}
}
2.使用CSS样式对象
<div :style="{ backgroundColor: bgColor, color: textColor }">111</div>
<script>
export default {
data() {
return {
bgColor: 'yellow',
textColor: 'blue'
};
}
};
</script>
二、第二种，使用类名绑定：class
<template>
<div :class="{'highlight': isActive, 'large-text': isLargeText}">111</div>
</template>
<script>
export default {
data() {
return {
isActive: false,
isLargeText: true
};
}
};
</script>
<style>
.highlight {
background-color: yellow;
}
.large-text {
font-size: 20px;
}
</style>