快捷導(dǎo)航

vue循環(huán)數(shù)據(jù)v-for / v-if最后一條問題

更新時間：2024年03月20日 10:17:51 作者：閑來無事垂釣

這篇文章主要介紹了vue循環(huán)數(shù)據(jù)v-for / v-if最后一條問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue循環(huán)數(shù)據(jù)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: {	
        //獲得數(shù)據(jù)
        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地址"
  }]
}

運行結(jié)果

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中使用debugger在瀏覽器中不起作用的問題及解決
這篇文章主要介紹了Vue中使用debugger在瀏覽器中不起作用的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
關(guān)于vue3使用particles粒子特效的問題
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
對vue中的事件穿透與禁止穿透實例詳解
今天小編就為大家分享一篇對vue中的事件穿透與禁止穿透實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue中各種通信傳值方式總結(jié)
在本篇文章里小編給大家分享了關(guān)于vue中各種通信傳值方式的相關(guān)知識點，有興趣的朋友們學(xué)習(xí)下。
2019-02-02
集成vue到j(luò)query/bootstrap項目的方法
下面小編就為大家分享一篇集成vue到j(luò)query/bootstrap項目的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
關(guān)于Vue新搭檔TypeScript快速入門實踐
這篇文章主要介紹了關(guān)于Vue新搭檔TypeScript快速入門實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue pages 多入口項目 + chainWebpack 全局引用縮寫說明
這篇文章主要介紹了vue pages 多入口項目 + chainWebpack 全局引用縮寫說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue+jsplumb實現(xiàn)連線繪圖
這篇文章主要為大家詳細介紹了vue+jsplumb實現(xiàn)連線繪圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue3 的響應(yīng)式和以前有什么區(qū)別，Proxy 無敵？
這篇文章主要介紹了Vue3 的響應(yīng)式和以前有什么區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05