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

问题描述

问 题

我想做一个列表渲染

<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

请问如何做到？

解决方案

<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>

这篇关于vue.js - vue 如何在模板中判断数组的index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！