详解Vue demo实现商品列表的展示

2019-11-19 11:37:38

字体：大中小

来源：转载

供稿：网友

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						}					]				}			}		})

最终效果：