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
    }
  }
}