Question

如果我在内部使用v-for时如何正确使用v-？

实际上我想在索引为0或显示first data时添加条件我要添加active class

<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>

并在下一个数据时显示：

<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 active)区分第一个索引（v-if条件等等来将两个循环合并为一个

Answer 1

您可以创建一个函数isActive来确定索引是否为0而不是

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

Answer 2

我发现了问题..我认为你正在使用密钥，对于数组......密钥用于字典。以下是它的工作原理：

CSS

.active {
  background-color: #00ff00;
}

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>

请注意我删除了密钥！

JS：

var vm = new Vue({
 el: "#output",
 data: function () {
   return {
     slideItem : [
     {  '_id' :0, 'title':'title0' ,'body':'body 0'},
     {  '_id' :1, 'title':'title1' ,'body':'body 1'},
     {  '_id' :2, 'title':'title2' ,'body':'body 2'},
     {  '_id' :3, 'title':'title3' ,'body':'body 3'},
     {  '_id' :4, 'title':'title4' ,'body':'body 4'},
     {  '_id' :5, 'title':'title5' ,'body':'body 5'}
     ]
     }
   }
  });

什么...... 这是fiddle

Answer 3

您可以执行以下操作：

<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>

Object.keys(slideItem)[0] == k获取对象的第一个键，然后检查当前迭代的键是否匹配。

希望这有帮助！

如何使用v-if自定义v-for在div标签中创建一个类

3 个答案: