如何根据 Vue.js 的索引更改渲染列表项的 class？

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" class 呈现，后续项目使用 "col-sm-4" class。谁能告诉我我做错了什么？

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 的索引更改渲染列表项的 class？

How would one change the class of a rendered list item depending on its index with Vue.js?

vue.js

vuejs2