//title,talk_content,image是平級(jí)的屬性 <div class="items" v-for="item in lucklist"> <div class="items_wrap"> <div class="users"> <div class="user_name"><img :src="serverSrc+item.avatar_url"></img>{{item.nickname}}</div> <div class="user_tp">{{item.title}}</div> </div> <div class="main_new">{{item.talk_content}}</div> <div class="photos">//這樣要把以|分割的item.image循環(huán)出來(lái)，不知道怎么寫(xiě) <div class="photo"><img preview='1' src=""></div> </div> <div class="operate"> <span class="operate_like"> ? ? <i class="el-icon-thumb"></i><span class="operate_d">點(diǎn)贊</span> </span> </div> </div> </div> </div>
2 回答
pardon110
TA貢獻(xiàn)1038條經(jīng)驗(yàn) 獲得超227個(gè)贊
vue 的指令大多數(shù)都接受一個(gè)原生js表達(dá)式，v-for也一樣，所以你完全可以用原生js字符串的split方法，像這樣
<div?class="photos"?v-for="pic?in?item.image.split('|')">當(dāng)然如果你覺(jué)得這樣用的不爽，太low了，也可以用上vue的過(guò)濾器或者子組件之類，唯一的區(qū)別在于，過(guò)濾器或子組件可以在頁(yè)面端作數(shù)據(jù)校驗(yàn)，自定義切割方式，路徑修改，當(dāng)然實(shí)在覺(jué)得麻煩，用react的形式，一個(gè)map函數(shù)解決，效率高。
split 支持字符串或正則表達(dá)式分割 stringObject，返回一個(gè)字符串?dāng)?shù)組
所以假定你的后臺(tái)image是這樣?
image:?"a.jpg@b.jpg#c.jpg|d.jpg"
你可以這樣切割成數(shù)組，結(jié)合v-for指令渲染
<div?class="photos"?v-for="pic?in?item.image.split(/[@#|]/)">
得到
a.jpg b.jpg c.jpg d.jpg
添加回答
舉報(bào)
0/150
提交
取消