怎么样让类名改变样式也随之改变呢

在 Vue 中，您可以使用 `:class` 或 `v-bind:class` 指令来动态绑定类名，并且使用计算属性来决定类名绑定的值。在这种情况下，当计算属性或数据改变时，类名会自动更新，从而影响元素的样式。

例如，您可以在模板中使用以下代码：

<div :class="classObject">默认值</div>

在这个例子中，`:class` 绑定了一个计算属性 `classObject`，该计算属性返回一个对象，对象的键是类名，值是一个布尔值，用于判断是否应该应用该类名。在这种情况下，如果 `isClassActive` 为 `true`，则应用 `my-class` 类名，否则不应用。

接下来，在您的 Vue 实例中，您可以使用以下代码创建一个计算属性：

new Vue({
  el: '#app',
  data: {
    isClassActive: false
  },
  computed: {
    classObject: function () {
      return {
        'my-class': this.isClassActive
      }
    }
  }
})

在这个例子中，`classObject` 计算属性返回一个对象，对象的键是类名，值是一个布尔值，用于判断是否应该应用该类名。在这种情况下，如果 `isClassActive` 为 `true`，则应用 `my-class` 类名，否则不应用。

当 `isClassActive` 的值改变时，`classObject` 的值也会相应地改变，从而动态地改变类名，并且影响元素的样式。