在Vue項目中，我們想要實現下面的布局效果
后端返回的數據格式如下，可以看出產品列表五張圖的數據位於同一個數組中
而我的html結構如下：
我希望直接渲染左邊一張大圖，然后右邊的四張小圖通過v-for進行遍歷，這就需要截取后四條數組數據。我首先想到的就是通過數組的slice方法直接在v-for的位置截取product_list數組的后四條數據。
就是下面的代碼操作：
這時，發現圖片不但無法渲染，點開控制台，發現連img標簽都沒有渲染出來。這是為什么呢？
這是因為數組的slice方法並沒有修改原數組，而是在原數組的基礎上取出部分元素重新生成一個新數組。這就需要知道這個拷貝出來的新數組，並沒有存到data數據中。而Vue視圖層中綁定的數據必須要求出現在data或者computed數據中，否則就無法進行頁面渲染。
原因找到了，那又該如何解決呢，接下來就想到了在接收到后端返回數據的時候對數據格式進行修改。修改方式和修改后的數據結構如下：
html代碼中渲染頁面的方式也就可以換成如下的方式，也就實現了想要的頁面布局效果。
此外還可以采用計算屬性的方式，對data中的floorData數據格式進行修改，未完待續。。。。。。。。