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

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>

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

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

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
    }
  }
}

一定要避免在方法中更改实例属性，但读取是可以的。

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

Are Vue 3 class bindings with variables required to be in-line?

javascript

css

vue.js

vue-component

vuejs3