TA卡，，循环输出的布局一样，只有几个文字根据点击的TAB卡不一样而不一样

我的判断依据是根据tab卡当前的ID值进行判断，如果放到循环体就取不到了。
放到外部，就要写两个循环了？
因为后端返回的字段都是一样的，只是点击购买中的循环中的文字和取值不一样

        <div class="demo-tab">
            <ul>
                <li @click="e=>this.current_tab=0" 
                    :class="{'active':this.current_tab===0}">
                    <b>购买中</b>
                    <em></em>
                </li>
                <li @click="e=>this.current_tab=1" 
                    :class="{'active':this.current_tab===1} ">
                    <b>待发货</b>
                    <em></em>
                </li>
                <li @click="e=>this.current_tab=2"
                    :class="{'active':this.current_tab===2}">
                    <b>已收货</b>
                    <em></em>
                </li>
            </ul>
        </div>
        
        <div class="demo-cont">
            <div class="" v-for="(item,index) in data" :key="index">
                这里只有购买中的字段不一样，其它两个都一样
            </div>
        </div>