vue循环切割多个图片的url

Question

//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>

Answer 1

vue 的指令大多数都接受一个原生js表达式，v-for也一样，所以你完全可以用原生js字符串的split方法，像这样<div class="photos" v-for="pic in item.image.split('|')">当然如果你觉得这样用的不爽，太low了，也可以用上vue的过滤器或者子组件之类，唯一的区别在于，过滤器或子组件可以在页面端作数据校验，自定义切割方式，路径修改，当然实在觉得麻烦，用react的形式，一个map函数解决，效率高。split 支持字符串或正则表达式分割 stringObject，返回一个字符串数组所以假定你的后台image是这样 image: "[e-mail]#c.jpg|d.jpg"你可以这样切割成数组，结合v-for指令渲染<div class="photos" v-for="pic in item.image.split(/[@#|]/)">得到a.jpg b.jpg c.jpg d.jpg

Answer 2

for(i in item){}你试一下也有可能是item.length,编辑器里面应该有提示