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() {

  ...

  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

    }

  }

}

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