Question

我有以下Vue.js模板代码：

<div v-for="(item, index) in items" :class="{col-sm-4: index !== 0, col-sm-8: index === 0}" >
    <a :title="item.title" :href="item.link">
        <img :title="item.title" :src="item.image" :alt="item.alt" class="img img-responsive">
    </a>
</div>

我希望列表中的第一个项目使用“col-sm-8”类以及后续项目来使用“col-sm-4”类。谁能告诉我这里我做错了什么？

Answer 1

您可以使用三元语句，如下所示：

<div v-for="(item, index) in items" :class="[(index === 0) ? 'col-sm-8' : 'col-sm-4]" >
    <a :title="item.title" :href="item.link">
        <img :title="item.title" :src="item.image" :alt="item.alt" class="img img-responsive">
    </a>
</div>

这是JSFiddle的一个例子：https://jsfiddle.net/15Lgrj92/

如果您需要应用更多条件，也可以使用对象数组：

<div v-for="(item, index) in items" :class="[{'col-sm-8': index === 0}, {'col-sm-4': index !== 0}]" >
    <a :title="item.title" :href="item.link">
        <img :title="item.title" :src="item.image" :alt="item.alt" class="img img-responsive">
    </a>
</div>

以下是JSfiddle：https://jsfiddle.net/opa5aq98/

您可以在文档中找到更多信息：https://vuejs.org/v2/guide/class-and-style.html

如何根据Vue.js的索引更改呈现的列表项的类？

1 个答案: