鍍金池/ 問(wèn)答/HTML5  PHP  HTML/ vue遍歷一個(gè)字段存儲(chǔ)的多張圖片?

vue遍歷一個(gè)字段存儲(chǔ)的多張圖片?

上傳圖片組后(九張圖片),想在前端渲染成九宮圖,服務(wù)器返回的是json數(shù)據(jù),vue怎么將一個(gè)字段多圖片路徑成功渲染?
前端代碼:

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

返回的數(shù)據(jù)是:

conimages:"/uploads/20180715/5c2c9844eddc0aa4687a9d1dd448d446.jpg,/uploads/20180715/5c2c9844eddc0aa4687a9d1dd448d446.jpg,/uploads/20180715/5c2c9844eddc0aa4687a9d1dd448d446.jpg"
回答
編輯回答
不討囍

"sdfsfsd".split
把字符串分割成數(shù)組

2017年12月2日 04:46
編輯回答
毀憶

把字符串處理成數(shù)組再v-for

2017年8月3日 06:45
編輯回答
互擼娃
v-for="item in item.conimages.split(',')"

Update:
使用一個(gè)計(jì)算屬性:

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

// template
v-for="item in conimages"
2017年6月11日 14:05