在 Vue 中循环并添加动态类名

Question

我是 Vue 的新手，遇到了一个问题。我有一个对象数组，我希望循环的包装器具有动态类名例如

<div v-for="({time, date, name}, i) in myObject" :key="i" class="my-custom-class">

好吧，如果键 (i) 大于 3，那么我希望类名具有不同的名称或者至少添加一个额外的名称（如 hiddenDiv）。

我知道不能在 v-for 语句中添加 v-if 条件。感谢任何帮助。

Answer 1

您可以使用基于当前循环索引 :class="{'hide-div':i>3}":

的条件绑定 class

<div v-for="({time, date, name}, i) in myObject"
:key="i" :class="{'hide-div':i>3}" class="my-custom-class" >

Answer 2

如果您想在 vue 中应用动态 class，那么您可以使用 class 绑定将特定的 class 应用到元素。

您可以阅读 class 和样式绑定 here。

此外，您可以使用 class 定义一个方法，并应用一些需要更改 class 的条件。

Answer 3

使用计算属性...

的另一种方法

<div v-for="({time, date, name}, i) in myObject"
:key="i" :class="getClassName(i)" class="my-custom-class" >

并在您的计算中

computed: {

 getClassName() {
  return i => {
     if(i === 0) return 'classOne';
     elseif(i === 1) return 'classTwo'
     else return 'classThree';
    // In this way you can maintain as many classNames you want based on the condition
  }
 }
}

在 Vue 中循环并添加动态类名

Looping in Vue and adding dynamic className

dynamic

vue.js

v-for