javascript - 将 v-for 创建的元素绑定(bind)到不同的 css 类

Question

我得到了 v-for 创建的元素，我想根据数据为这些元素提供不同的 css 类。为此，我需要一种无需 v-for 即可到达 activeNumbers 的方法，或者使用 v-for 无需迭代。

<template>

 <div v-for"n in 20" class="tables" :class="activeClass : activeNumbers == number">{{n}} 
 </div>

</template>

<script> 
data(){
  return {
  activeNumbers:["1","5","8","9","17","12","19"]
 }
}
</script>

<style>
.activeClass{
background: red;
}

.tables{
  border:4px solid;
  max-width: 120px;
  width: 80%;
  display: inline-block;
}
</style>

我尝试使用标签来访问 activeNumber 但它不起作用。

Answer 1

如果我明白您要查找的内容，那么您希望在 n 位于 activeNumbers 中时有条件地添加您的类。如果是这样，您需要执行以下操作:

<div v-for"n in 20" class="tables" :class="activeNumbers.indexOf(n.toString()) !== -1 ? 'activeClass' : ''">
     {{n}} 
</div>

如果 n 在 activeNumbers 中，则将类设置为 activeClass，否则什么也不设置。请告诉我这是否是您正在寻找的内容。