vue遍历一个字段存储的多张图片?

上传图片组后(九张图片),想在前端渲染成九宫图,服务器返回的是json数据,vue怎么将一个字段多图片路径成功渲染?
前端代码:

<img v-for="item in item.conimages" class="mui-col-sm-6 mui-col-xs-4" style="white-space: normal;height: 110px;width: 32.3%;" :src="item" data-preview-src="" data-preview-group="1" >

返回的数据是:

conimages:"/uploads/20180715/5c2c9844eddc0aa4687a9d1dd448d446.jpg,/uploads/20180715/5c2c9844eddc0aa4687a9d1dd448d446.jpg,/uploads/20180715/5c2c9844eddc0aa4687a9d1dd448d446.jpg"
阅读 3.8k
3 个回答
v-for="item in item.conimages.split(',')"

Update:
使用一个计算属性:

computed: {
    conimages: function () {
        let conimages = this.item.conimages
        return conimages ? conimages.split(',') : []
    }
}

// template
v-for="item in conimages"

把字符串处理成数组再v-for

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题