Vue.js：切换类 onclick

Posted 2023-03-07

【中文标题】Vue.js：切换类 onclick

【英文标题】：Vue.js: toggle class onclick

【发布时间】：2018-02-27 10:22:25

【问题描述】：

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

我的 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 类。我有什么误解——这不应该有效吗？我想在单击按钮时切换类，但我无法让这部分工作。

【问题讨论】：

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

【参考方案1】：

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

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

【讨论】：

哦，感谢您的快速回答。这很适合我的目的——谢谢！