在 Vue 中循环并添加动态 className

问题描述

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

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

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

我知道不可能在 v-for 语句中添加 v-if 条件。 任何帮助表示赞赏。

解决方法

您可以使用基于当前循环索引 :class="{'hide-div':i>3}" 的条件绑定类：

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

,

另一种使用计算属性的方法...

<div v-for="({time,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 中应用动态类，那么你可以使用类绑定来将特定的类应用到元素上。

您可以阅读有关类和样式绑定的信息 here。

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