vue动态切换类

vue绑定类，是通过绑定class，class的内容是一个对象。

:class="{red:true,green:false}"

如果是true，就显示该类的样式，如果是false，就不显示该类的样式。

动态切换类，就是通过方法，改变绑定的true/false的值。

例子：

点击div实现颜色切换

<template>
<div :class="{red,green}" @click="change()">
</div>
</template>
<script>
export default {
  name: "HelloWorld",
  data () {
    return {
      red:true,
      green:false
    };
  },
  methods: {
    change(){
      this.red = !this.red;
      this.green = !this.green;
    }
  },
}
</script>
<style lang="css" scoped>
.red{
  width: 100px;
  height: 100px;
  background: red;
}

.green{
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>