vue循环数据v-for / v-if最后一条问题
作者：闲来无事垂钓
这篇文章主要介绍了vue循环数据v-for / v-if最后一条问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue循环数据v-for / v-if最后一条
html部分
<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的类名
<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判断找到最后一条
<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部分
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格式
{
"mylistdata": [{
"title": "描述标题",
"content": "描述文字",
"pho": "图片的url地址"
}]
}运行结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。