带有变量的 Vue 3 类绑定是否需要内联？答案

【问题标题】：Are Vue 3 class bindings with variables required to be in-line?带有变量的 Vue 3 类绑定是否需要内联？
【发布时间】：2021-03-29 07:45:17
【问题描述】：

给定以下 HTML：

<template v-for="(child, index) in group">
    <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}">
        <div>Container Content</div>
    </div>
</template>

鉴于类绑定依赖于通过v-for 循环 (child.id) 传递的条件，有没有办法将类绑定移出 HTML？

文档提到能够bind computed properties，但我的理解是这些不接受参数（而且我无法让它以这种方式工作）。

【问题讨论】：

标签： javascript css vue.js vue-component vuejs3

【解决方案1】：

您可以使用方法并将项目传递给方法：

<div :class="classes(child)">

setup() {
  ...
  const classes = (child) => {
    return {
      'border-pink-700 bg-gray-100': selected.value === child.id
    }
  } 
    
  return {
    ...
    selected,
    classes
  }
}

如果您使用的是 Vue 2 或 Options API：

methods: {
  classes(child) {
    return {
      'border-pink-700 bg-gray-100': this.selected === child.id
    }
  }
}

请务必避免在方法中更改实例属性，但读取是可以的。

【讨论】：