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>

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

文档提到能够绑定计算属性，但我的理解是这些属性不接受参数（而且我无法让它以这种方式工作）。

Answer 1

您可以使用一个方法并将项目传递给该方法：<div :class="classes(child)">setup() {&nbsp; ...&nbsp; const classes = (child) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; 'border-pink-700 bg-gray-100': selected.value === child.id&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return {&nbsp; &nbsp; ...&nbsp; &nbsp; selected,&nbsp; &nbsp; classes&nbsp; }}如果您使用的是 Vue 2 或 Options API：methods: {&nbsp; classes(child) {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; 'border-pink-700 bg-gray-100': this.selected === child.id&nbsp; &nbsp; }&nbsp; }}请务必避免更改方法中的实例属性，但读取是可以的。