前端-VUE2中的动态CSS样式

一、第一种，：style写法，分为直接赋值变量，或者使用CSS样式对象

1.赋值变量

点击

 computed: {

    buttonStyle() {

      return {

        backgroundColor: this.clicked ? 'green' : 'blue',

        color: 'white',

        padding: '10px 20px'

      };

    }

  }

2.使用CSS样式对象

111

export default {

  data() {

    return {

      bgColor: 'yellow',

      textColor: 'blue'

    };

  }

};

二、第二种，使用类名绑定：class

  111

export default {

  data() {

    return {

      isActive: false,

      isLargeText: true

    };

  }

};

.highlight {

  background-color: yellow;

}

.large-text {

  font-size: 20px;

}