Vue中如何通过v-bind:class带参数调用方法添加CSS类？

错误根源 #

你把addNewClass定义在了computed（计算属性）中，但Vue的计算属性不支持直接传递参数——计算属性是基于响应式依赖的缓存属性，只能通过直接访问的方式使用，无法像方法那样传参调用，这就是你带参数调用时报错的原因。

解决方法1：将计算属性改为方法 #

把addNewClass从computed移到methods中，方法支持传参，每次调用都会执行逻辑，完全匹配你的需求：

修改后的脚本代码：

const app = Vue.createApp({
  data() {
    return {
      boxASelected: false,
      boxBSelected: false,
      boxCSelected: false,
    };
  },

  methods: {
    // 移到methods里，支持传参
    addNewClass(box) {
      if (box === 'A') {
        return {active: this.boxASelected};
      } else if (box === 'B') {
        return {active: this.boxBSelected};
      } else if (box === 'C') {
        return {active: this.boxCSelected};
      }
    },
    boxSelected(box) {
      if (box === 'A') {
        this.boxASelected = !this.boxASelected;
      } else if (box === 'B') {
        this.boxBSelected = !this.boxBSelected;
      } else if (box === 'C') {
        this.boxCSelected = !this.boxCSelected;
      }
    },
  },
});

app.mount('#styling');

HTML代码无需修改，:class="addNewClass('A')"这样的调用方式即可正常工作。

解决方法2：优化数据结构（更简洁优雅） #

把多个分散的boxXSelected变量合并成一个对象，大幅简化逻辑代码，同时提升扩展性：

修改后的脚本代码：

const app = Vue.createApp({
  data() {
    return {
      // 用对象统一管理选中状态
      boxSelectedStatus: {
        A: false,
        B: false,
        C: false
      }
    };
  },

  methods: {
    addNewClass(box) {
      return { active: this.boxSelectedStatus[box] };
    },
    boxSelected(box) {
      this.boxSelectedStatus[box] = !this.boxSelectedStatus[box];
    },
  },
});

app.mount('#styling');

HTML部分保持原样即可，后续新增其他box时，无需修改逻辑代码，直接在boxSelectedStatus中添加对应键值对即可。

内容的提问来源于stack exchange，提问作者rafi ullah waseem