Vue.js 3 html 动态类基于计算属性传递参数

Posted 2023-02-23

【中文标题】Vue.js 3 html 动态类基于计算属性传递参数

【英文标题】：Vue.js 3 html dynamic class passing arguments based on computed property

【发布时间】：2021-03-23 06:42:43

【问题描述】：

我在 Vue 3 中使用动态类。

在模板中

// Within a loop
<div v-for="(item, index) in store.state.data" :key="`data-$index`">
  <!-- I want to send item as an argument -->
  <div :class="myComputed"></div>
</div>

在 setup() 中

const myComputed = computed(() => 
  const number = 500;
  return `bg-red-$number`;
);

到目前为止一切顺利。

现在我想将一个变量发送到我的计算属性以使类动态。按照设计，Vue 计算属性不带参数。函数可以，但是当它成为一个函数时，它不再是响应式的。

我该如何解决？

【参考方案1】：

我建议通过添加一个包含颜色的字段来基于该存储数据创建一个计算属性：

const myData= computed(() => 
 return store.state.data.map(item=>
         return   ...item,bgColor:`bg-red-$item.number`;
     )
);

然后遍历该属性：

<div v-for="(item, index) in myData" :key="`data-$index`">

  <div :class="item.bgColor"></div>
</div>

在 Tailwindcss 中不建议使用字符串连接，因为清除 css 将删除该类。 learn more