javascript - 绑定不同的css类v-for创建的元素

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

如果我了解您要查找的内容，则您希望有条件地添加您的课程 if nis in activeNumbers。如果是这样，这是您需要做的：

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

这会将类设置为activeClassif nis inactiveNumbers或 nothing if not。让我知道这是否是您正在寻找的。