截取下标渲染

<template>
<div class="wrap">
<div class="banner">
<Carousel autoplay loop>
<CarouselItem v-for="val,index in list">
<div class="demo-carousel">
<ul>
<li><img :src="val.image" /></li>
</ul>
</div>
</CarouselItem>
</Carousel>
</div>
<div class="map">
<dl v-for="val,index in map">
<dt><img :src="val.image" /></dt>
<dd>{{val.title}}</dd>
</dl>
</div>
<div class="nvzhuang">
<div class="nv">
<h2>—— 潮流女装 ——</h2>
</div>
<div class="nz">
<div class="nv-left">
<dl v-for="val,index in nv" v-if="index==0">
<dd>{{val.title}}</dd>
<dd class="dazhe">{{val.price}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
<div class="nv-right">
<dl v-for="val,index in nv" v-if="index==1">
<dd>{{val.title}}</dd>
<dd><span>品质精挑</span></dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nv" v-if="index==2">
<dd>{{val.title}}</dd>
<dd><span>品质精挑</span></dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
</div>
<div class="nv-top">
<dl v-for="val,index in nv" v-if="index==3">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nv" v-if="index==4">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nv" v-if="index==5">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nv" v-if="index==6">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
</div>
<!--男装-->
<div class="nvzhuang">
<div class="nv">
<h2>—— 品牌男装 ——</h2>
</div>
<div class="nz">
<div class="nv-left">
<dl v-for="val,index in nan" v-if="index==0">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
<div class="nv-left">
<dl v-for="val,index in nan" v-if="index==1">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
</div>
<div class="nv-top">
<dl v-for="val,index in nan" v-if="index==2">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nan" v-if="index==3">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nan" v-if="index==2">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in nan" v-if="index==3">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
</div>
<!--电脑办公-->
<div class="nvzhuang">
<div class="nv">
<h2>—— 电脑办公 ——</h2>
</div>
<div class="nz">
<div class="nv-left">
<dl v-for="val,index in ban" v-if="index==0">
<dd>{{val.title}}</dd>
<dd class="dazhe">{{val.price}}</dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
<div class="nv-right">
<dl v-for="val,index in ban" v-if="index==1">
<dd>{{val.title}}</dd>
<dd><span>品质精挑</span></dd>
<dt><img :src="val.image" /></dt>
</dl>
<dl v-for="val,index in ban" v-if="index==2">
<dd>{{val.title}}</dd>
<dd><span>品质精挑</span></dd>
<dt><img :src="val.image" /></dt>
</dl>
</div>
</div>
<div class="nv-top">
<dl v-for="val,index in ban" v-if="index==3">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
<dd class="red">￥{{val.price}}</dd>
</dl>
<dl v-for="val,index in ban" v-if="index==4">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
<dd class="red">￥{{val.price}}</dd>
</dl>
<dl v-for="val,index in ban" v-if="index==5">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
<dd class="red">￥{{val.price}}</dd>
</dl>
<dl v-for="val,index in ban" v-if="index==3">
<dd>{{val.title}}</dd>
<dt><img :src="val.image" /></dt>
<dd class="red">￥{{val.price}}</dd>
</dl>
</div>
</div>
<div class="tuijian">
<h2>为你推荐</h2>
<dl v-for="val,index in tui">
<dt><img :src="val.image" /></dt>
<dd>{{val.title}}</dd>
<dd class="red">￥{{val.price}}</dd>
</dl>
</div>
</div>
</template>

<script>
import axios from "axios"
export default {
name: "tab1",
data() {
return {
list: [],
map: [],
nv: [],
nan: [],
ban: [],
tui: [],
}
},
created: function() {
var that = this;
axios.get('http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f').then(function(res) {
that.list = res.data.data;
})
axios.get('http://vueshop.glbuys.com/api/home/index/nav?token=1ec949a15fb709370f').then(function(res) {
that.map = res.data.data;
})
axios.get('http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f').then(function(res) {
that.nv = res.data.data[0].items;
})
axios.get('http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f').then(function(res) {
that.nan = res.data.data[1].items;
})
axios.get('http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f').then(function(res) {
that.ban = res.data.data[2].items;
})
axios.get('http://vueshop.glbuys.com/api/home/index/recom?token=1ec949a15fb709370f').then(function(res) {
that.tui = res.data.data;
})
}

}
</script>
<style type="text/css">
.wrap {
width: 100%;
height: 100%;
background: #EFEFEF;
}

.banner img {
width: 100%;
}

.map {
width: 100%;
background: #FFFFFF;
}

.map dl {
width: 25%;
float: left;
padding: 0.3rem;
text-align: center;
}

.map dl img {
width: 60%;
}

.map dl dd {
font-size: 0.4rem;
}

.nvzhuang {
width: 100%;
background: #fffff;
padding-top: 0.3rem;
}

.nv {
width: 100%;
background: #FFFFFF;
text-align: center;
}

.nv h2 {
font-size: 0.4rem;
color: red;
}

.nv-left {
width: 50%;
float: left;
padding: 0.2rem;
background: #FFFFFF;
}

.nv-left dl dd {
font-size: 0.4rem;
height: 0.6rem;
overflow: hidden;
}

.nv-left img {
width: 4rem;
height: 2rem;
margin-left: 0.3rem;
}

.nv-right {
width: 50%;
height: 50%;
float: left;
background: #FFFFFF;
}

.nv-right dl dd {
width: 2.5rem;
height: 0.5rem;
overflow: hidden;
float: left;
font-size: 0.4rem;
margin-top: 0.2rem;
margin-left: 0.2rem;
}

.nv-right img {
width: 35%;
margin-right: 0.3rem;
}

.dazhe {
width: 1.1rem;
height: 0.5rem;
background: red;
margin-left: 1rem;
color: red;
color: #FFFFFF;
border-radius: 50%;
text-align: center;
}

.nv-top {
width: 100%;
background: #ffffff;
}

.nv-top dl {
width: 25%;
float: left;
padding: 0.3rem;
text-align: center;
}

.nv-top dl img {
width: 100%;
background: #EFEFEF;
}

.nv-top dl dd {
height: 0.5rem;
overflow: hidden;
font-size: 0.35rem;
}

.tuijian h2 {
text-align: center;
font-size: 0.5rem;
margin-top: 0.15rem;
}
.tuijian dl{
width: 50%;
float: left;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.3rem;
}
.tuijian dl img{
width: 100%;
}
.tuijian dl dd{
height: 1rem;
overflow: hidden;
font-size: 0.35rem;
}
.tuijian .red{
color: red;
font-size: 0.4rem;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->