vue动态切换类

Posted on 2020-02-27 14:14  猫头唔食鱼  阅读(646)  评论(1编辑  收藏  举报

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>