vue 如何在模板中判断数组的index

Question

我想做一个列表渲染

<ul id="pitem-list" v-for="item in items">
    <li class="pitem" :style="float: 这里判断index是否为单数">
        <a href="item.id"></a>
        <div class="pitem-img">
            <a href="item.id"></a>
            <img :src="item.thumb" alt="">
        </div>
        <p class="item-summary">
            {{ item.summary }}
        </p>
        <div class="price-div">
            {{ item.price }}
        </div>
    </li>
</ul>

//省略部分代码,以下是vue的mounted

mounted(){
    //省略items的获取
    console.log(this.items)
}

我想在mounted的时候，用forEach判断index，如果为单数就float:right

请问如何做到？

Answer 1

<ul id="pitem-list" v-for="(item, index) in items">
    <li class="pitem" :style="{ float: index % 2? 'right':'' }">
        <a href="item.id"></a>
        <div class="pitem-img">
            <a href="item.id"></a>
            <img :src="item.thumb" alt="">
        </div>
        <p class="item-summary">
            {{ item.summary }}
        </p>
        <div class="price-div">
            {{ item.price }}
        </div>
    </li>
</ul>

Answer 2

<ul id="pitem-list" v-for="(item, key) in items">
    <li class="pitem" :style="calcStyle(key)">
        <a href="item.id"></a>
        <div class="pitem-img">
            <a href="item.id"></a>
            <img :src="item.thumb" alt="">
        </div>
        <p class="item-summary">
            {{ item.summary }}
        </p>
        <div class="price-div">
            {{ item.price }}
        </div>
    </li>
</ul>

methods: {
    calcStyle(key) {
        let style = {}
        if (key % 2 !== 0) {
            style = {float: 'right'}
        }
        return style
    }
}