Vue实现商品列表的展示是一个比较简单的入门demo，下面是具体的实现：

简单CSS样式：

<style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img{ width: 200px; height: 150px; }</style>

html：

<div class="" id="box"> <ul> <li v-for="v in json.list"> <img v-bind:src="v.src" alt=""> <h4>{{v.des}}</h4> <p>{{v.price}}</p> </li> </ul> </div>

Vue组件：

new Vue({ el:'#box', data:{ json:{ list:[ { src:'images/1.jpg', des:'这是第一个描述', price:198 }, { src:'images/2.jpg', des:'这是第二个描述', price:198 }, { src:'images/3.jpg', des:'这是第三个描述', price:211 }, { src:'images/1.jpg', des:'这是第一个描述', price:198 }, { src:'images/3.jpg', des:'这是第二个描述', price:112 }, { src:'images/3.jpg', des:'这是第三个描述', price:423 } ] } } })

最终效果：

以上所述是小编给大家介绍的Vue demo实现商品列表的展示详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！