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地址"
  }]
}

运行结果