vue3 中 点击div后 更改div式样

在 Vue3 中，可以使用`v-bind:class`或`v-bind:style`指令来更改元素的样式。

1. 使用`v-bind:class`指令：

<template>
  <div :class="{ active: isActive }" @click="changeStyle">点击我改变样式</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    changeStyle() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.active {
  background-color: red;
}
</style>

2. 使用`v-bind:style`指令：

<template>
  <div :style="{ backgroundColor: bgColor }" @click="changeStyle">点击我改变样式</div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 'white'
    }
  },
  methods: {
    changeStyle() {
      this.bgColor = 'red'
    }
  }
}
</script>