为了账号安全,请及时绑定邮箱和手机立即绑定

vue循环切割多个图片的url

vue循环切割多个图片的url

lvbukai86 2019-06-18 13:31:29
//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循环出来,不知道怎么写 <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条经验 获得超227个赞

vue 的指令大多数都接受一个原生js表达式,v-for也一样,所以你完全可以用原生js字符串的split方法,像这样

<div class="photos" v-for="pic in item.image.split('|')">

当然如果你觉得这样用的不爽,太low了,也可以用上vue的过滤器或者子组件之类,唯一的区别在于,过滤器或子组件可以在页面端作数据校验,自定义切割方式,路径修改,当然实在觉得麻烦,用react的形式,一个map函数解决,效率高。

split 支持字符串或正则表达式分割 stringObject,返回一个字符串数组

所以假定你的后台image是这样 

image: "a.jpg@b.jpg#c.jpg|d.jpg"

你可以这样切割成数组,结合v-for指令渲染

<div class="photos" v-for="pic in item.image.split(/[@#|]/)">

得到

a.jpg
b.jpg
c.jpg
d.jpg


查看完整回答
反对 回复 2019-06-18
?
一个村庄

TA贡献6条经验 获得超0个赞

for(i in item){

}

你试一下也有可能是item.length,编辑器里面应该有提示

查看完整回答
反对 回复 2019-06-18
  • 2 回答
  • 0 关注
  • 1960 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信