前端-VUE2中的动态CSS样式

一、第一种，：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>