Vue——class与style绑定

1、代码如下：

  
  class与style绑定
  
    .classA {
      color: red;
    }
    .classB {
      background: blue;
    }
    .classC {
      font-size: 20px;
    }
  






  1. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组

  2. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"

  更新





  new Vue({
    el: '#demo',
    data: {
      myClass: 'classA',
      hasClassA: true,
      hasClassB: false,
      activeColor: 'red',
      fontSize: '20px'
    },

    methods: {
      update () {
        this.myClass = 'classB'
        this.hasClassA = !this.hasClassA
        this.hasClassB = !this.hasClassB
        this.activeColor = 'yellow'
        this.fontSize = '30px'
      }
    }
  })

2、效果图如下： 1）初始页面效果图： 2）点击更新之后的效果图：