Vue.js：切换类 onclick

Question

我正在尝试根据某些值是否为真来设置一个类。

我的 div：

<template>
<div class="navbar" v-bind:class=" {'test1': static, 'test2': isActive } ">
</template>

在我的组件的脚本部分，我写了这个：

<script>

export default {
  name: 'my-component',
  data: {
    static: true,
    isActive: true
  }
}

</script>

根据我的理解，这应该同时显示test1 类和test2 类。我有什么误解——这不应该有效吗？我想在单击按钮时切换类，但我无法让这部分工作。

Answer 1

数据需要是组件中的一个函数。

export default {
  name: 'my-component',
  data(){
    return {
      static: true,
      isActive: true
    }
  }
}