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

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://v2.vuejs.org/v2/guide/class-and-style.html