vue循环数据 v-for / v-if最后一条

html部分

[code]<ul class="mydemo">
<li v-for="item in listdata">
<div class="list-img">{{item.title}}</div>
<div class="tit">{{item.content}}</div>
<div class="head"><img :src="item.pho" /></div>
</li>
</ul>

 如果要找到最后一条，给最后一条的list-img单独加上一个red的类名

[code]<li v-for="(item,i) in listdata" >
<div class="list-img" :class="i===listdata.length-1?'red':''">{{item.id}}、{{item.title}}</div>
<div class="tit">{{item.content}}</div>
<div class="head">
<img :src="item.pho" />
</div>
</li>

或者用v-if判断找到最后一条

[code]<li v-for="(item,i) in listdata" >
<div class="list-img" >{{item.id}}、{{item.title}}</div>
<div class="tit">{{item.content}}</div>
<div class="head">
<img :src="item.pho" />
</div>
</li>
<li v-for="(item,i) in listdata" >
<div class="list-img red" v-if="i===listdata.length-1">{{item.id}}、{{item.title}}</div>
<div class="tit">{{item.content}}</div>
<div class="head">
<img :src="item.pho" />
</div>
</li>

js部分

[code]export default {
data() {
return {
url:"/static/list_img.json",
listdata:[],
}
},
created(){
this.getData();
},

methods: {
//获得数据
async getData(){
let self=this;
let dizhi = await self.$axios.get(self.url);
self.listdata = dizhi.data.mylistdata;
console.log(self.listdata);
},
}
};

json格式

[code]{
"mylistdata": [{
"title": "描述标题",
"content": "描述文字",
"pho": "图片的url地址"
}]
}

运行结果