Vue.js中如何根据布尔值切换元素样式？

你的思路是对的，用Vue的对象语法绑定class就能实现条件切换样式，不过原代码里有个小细节需要调整，下面是修正后的实现方案：

修正后的模板代码 #

<div
  class=""
  :class="{
    'green': visibleComponent !== 'orders',
    'opacity-25': visibleComponent === 'orders'
  }"
  @click="orders"
>
  <div>Orders</div>
</div>

关键注意事项 #

• 去掉类名前后的多余空格：原代码里' opacity-25 '带了前后空格，会导致生成无效的空白类名，改成'opacity-25'就正常了
• 确保visibleComponent是响应式变量：
  • 如果是Vue2，在组件的data里定义：

    data() {
      return {
        visibleComponent: '' // 初始值可根据需求设置，比如默认不是'orders'就设成其他值
      }
    }
    

  • 如果是Vue3，用ref定义响应式变量：

    import { ref } from 'vue'
    const visibleComponent = ref('')
    

• 实现orders点击方法：点击时切换visibleComponent的值，触发样式变化：
  • Vue2写法：

    methods: {
      orders() {
        // 点击后切换状态，也可以根据业务需求直接设为'orders'
        this.visibleComponent = this.visibleComponent === 'orders' ? '' : 'orders'
      }
    }
    

  • Vue3写法：

    const orders = () => {
      visibleComponent.value = visibleComponent.value === 'orders' ? '' : 'orders'
    }
    

这样点击这个div的时候，就会根据visibleComponent的值自动切换green和opacity-25这两个样式类了。

内容的提问来源于stack exchange，提问作者jibzy