详解详解Vue demo实现商品列表的展示实现商品列表的展示
主要介绍了Vue demo实现商品列表的展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一
定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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
}
]
}
}
评论1