Vue.js를 사용한 인덱스에 따라 렌더링된 목록 항목의 클래스는 어떻게 변경됩니까?

Vue.js를 사용한 인덱스에 따라 렌더링된 목록 항목의 클래스는 어떻게 변경됩니까?

다음 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' 클래스를 사용하고 싶습니다.내가 여기서 뭘 잘못하고 있는지 누가 말해줄래?

다음과 같이 3진법을 사용하면 됩니다.

<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

언급URL : https://stackoverflow.com/questions/41384257/how-would-one-change-the-class-of-a-rendered-list-item-depending-on-its-index-wi