vue循環(huán)數(shù)據(jù)v-for / v-if最后一條問(wèn)題
更新時(shí)間：2024年03月20日 10:17:51 作者：閑來(lái)無(wú)事垂釣
這篇文章主要介紹了vue循環(huán)數(shù)據(jù)v-for / v-if最后一條問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
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單獨(dú)加上一個(gè)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": "描述標(biāo)題",
"content": "描述文字",
"pho": "圖片的url地址"
}]
}運(yùn)行結(jié)果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過(guò)Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2021-12-12
使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項(xiàng)目的時(shí)候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了Javascript中Vuex的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡(jiǎn)單實(shí)例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決
這篇文章主要介紹了基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
詳解 vue better-scroll滾動(dòng)插件排坑
本篇文章主要介紹了詳解 vue better-scroll滾動(dòng)插件排坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02