怎么在Vue中使用demo实现商品列表展示

本篇文章为大家展示了怎么在Vue中使用demo实现商品列表展示，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

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" >	<h5>{{v.des}}</h5>	<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实现商品列表展示，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。