//title,talk_content,image是平級的屬性 <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)出來，不知道怎么寫 <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">點贊</span> </span> </div> </div> </div> </div>
2 回答
pardon110
TA貢獻1038條經(jīng)驗 獲得超227個贊
vue 的指令大多數(shù)都接受一個原生js表達式，v-for也一樣，所以你完全可以用原生js字符串的split方法，像這樣
<div?class="photos"?v-for="pic?in?item.image.split('|')">當(dāng)然如果你覺得這樣用的不爽，太low了，也可以用上vue的過濾器或者子組件之類，唯一的區(qū)別在于，過濾器或子組件可以在頁面端作數(shù)據(jù)校驗，自定義切割方式，路徑修改，當(dāng)然實在覺得麻煩，用react的形式，一個map函數(shù)解決，效率高。
split 支持字符串或正則表達式分割 stringObject，返回一個字符串?dāng)?shù)組
所以假定你的后臺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
添加回答
舉報
0/150
提交
取消