Javascript 如何使用v-if自定义v-for在div标记中生成类

当我使用v-for inside时，如何正确使用v-if

实际上，我想添加一个条件，当索引为

0

或显示

第一个数据时，我想添加
活动类

<div class="item active" v-for="(item, key, index) in slideItem" :key="item._id">
    <img alt="900x500" src="http://lorempixel.com/960/720/">
    <div class="carousel-caption">
        <h3>{{ item.title }}</h3>
        <p>{{ item.body }}</p>
    </div>
</div>


{{item.title}
{{item.body}


并在显示下一个数据时显示：

<div class="item" v-for="(item, key, index) in slideItem" :key="item._id">
        <img alt="900x500" src="http://lorempixel.com/960/720/">
        <div class="carousel-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.body }}</p>
        </div>
    </div>


{{item.title}
{{item.body}


您可以看到我给出的两个示例，我如何通过区分第一个索引（
item active）
条件将两个循环组合为一个循环，等等，使用
v-if
您可以创建一个函数
isActive
，确定索引是否在0和0之间

v-bind:class="{'active': isActive}"

您可以使函数
成为活动的
，以确定索引是否在0和以下

v-bind:class="{'active': isActive}"

我发现了问题。。我想你用的是一个键，一个数组。。。这把钥匙是用来编字典的。
以下是它的工作原理：

CSS

HTML:

<div id="output">
 <div class="item" v-for="(item, index) in slideItem" :key="item._id">
   <div class="carousel-caption"  :class="{active: index==1}">
     <h3>{{ item.title }} {{index}}</h3>
     <p>{{ item.body }}</p>
   </div>
 </div>
</div>

什么。。。
这是我发现问题的答案。。我想你用的是一个键，一个数组。。。这把钥匙是用来编字典的。
以下是它的工作原理：

CSS

HTML:

<div id="output">
 <div class="item" v-for="(item, index) in slideItem" :key="item._id">
   <div class="carousel-caption"  :class="{active: index==1}">
     <h3>{{ item.title }} {{index}}</h3>
     <p>{{ item.body }}</p>
   </div>
 </div>
</div>

什么。。。
以下是您可以执行的操作：

<div class="item" v-for="(item, k) in slideItem" :key="item._id"
     :class="{active: Object.keys(slideItem)[0] == k}">
    <img alt="900x500" src="http://lorempixel.com/960/720/">
    <div class="carousel-caption">
        <h3>{{ item.title }}</h3>
        <p>{{ item.body }}</p>
    </div>
</div>


{{item.title}
{{item.body}


Object.keys（slideItem）[0]==k
获取对象的第一个键，然后检查当前迭代的键是否匹配。
您可以执行以下操作：

<div class="item" v-for="(item, k) in slideItem" :key="item._id"
     :class="{active: Object.keys(slideItem)[0] == k}">
    <img alt="900x500" src="http://lorempixel.com/960/720/">
    <div class="carousel-caption">
        <h3>{{ item.title }}</h3>
        <p>{{ item.body }}</p>
    </div>
</div>


{{item.title}
{{item.body}


Object.keys（slideItem）[0]==k
获取对象的第一个键，然后检查当前迭代的键是否匹配。
Hi@dscni我必须创建函数吗？它如何区分它？我刚刚启动vueyes，您应该创建
isActive
函数。您应该将它放在挂载循环或方法中，然后在等待dataHi@dscni时调用它。我必须创建一个函数吗？它如何区分它？我刚刚启动vueyes，您应该创建
isActive
函数。你应该把它放在挂载循环或方法中，然后如果你在等待dataIs
slideItem
数组或对象，就调用它？Hi@Rosswillson是ObjectIs
slideItem
数组或对象？Hi@Rosswillson是ObjectHi@CodeHacker我必须创建一个类似于
dscni
所说的函数吗？一点也不。。。如果你做了超过一行，你应该做，但对于像那样简单的事情。。。只要写下条件，就必须使用
item.index==0
Hi@CodeHacker我必须创建一个像
dscni
所说的函数吗？一点也不。。。如果你做了超过一行，你应该做，但对于像那样简单的事情。。。只需将条件写入其中，就必须使用
item.index==0