Vue3 根据bool变量修改div的样式

在Vue3中，可以使用`class`绑定和条件语句来根据`bool`变量来修改`div`的样式。

下面是一个根据`bool`变量来修改`div`样式的例子：

<template>
  <div :class="{ 'active': bool }">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      bool: false
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-size: 16px;
}
</style>

上面的代码中，我们使用了`:class`绑定来绑定样式。`:class`的值是一个对象，当`bool`为`true`时，会自动添加`active`类，从而修改`div`的样式。注意，在CSS中，我们定义了`.active`类来修改`div`的样式。

如果要根据`bool`变量来添加或移除类，也可以使用以下语法：

<template>
  <div :class="[bool ? 'active' : '']">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      bool: false
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-size: 16px;
}
</style>

上面的代码中，我们使用了`:class`绑定和条件语句来根据`bool`变量来添加或移除类。当`bool`为`true`时，会自动添加`active`类，从而修改`div`的样式；当`bool`为`false`时，不会添加任何类，从而保持原来的样式。