Vue 3类与变量的绑定是否需要内联

Question

给定以下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中移出？

文档中提到能够绑定计算属性，但我的理解是这些属性不接受参数(我还没能让它以这种方式工作(。

Answer 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或选项API：

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

请确保避免更改方法中的实例属性，但读取是可以的