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,编辑器里面应该有提示