Vue动态样式:class用法

我们在做页面的时候，经常会用到动态样式，比如有3个按钮，选中了一个，选中那个样式变化，再选另一个，选的那一个样式变化，第一个又变成初始的样式，这个就叫做动态样式，一般用:class来实现。

1、首先定义一个变量；

2、写动态的class，
&.activity{}

3、在点击事假中；

整个文件如下：

<template>
  <div>
    <h1>动态样式</h1>
    <span class="money" :class="{activity: value === 'A'}" @click="toA">10元</span>
    <span class="money" :class="{activity: value === 'B'}" @click="toB">50元</span>
    <span class="money" :class="{activity: value === 'C'}" @click="toC">100元</span>
  </div>
</template>
<script>
export default {
  name: "Class",
  data() {
    return {
      value: "", //变量
    };
  },
  methods: {
    toA() {
      this.value = "A";
    },
    toB() {
      this.value = "B";
    },
    toC() {
      this.value = "C";
    },
  },
};
</script>
<style lang="scss" scoped>
.money {
  font-size: 18px;
  margin: 10px;
  border: 1px solid #000000;
  padding: 10px;
  cursor: pointer;
  &.activity{
      background: pink;
      color: #ffffff;
  }
}
</style>