作者：mobiledu2502894873 | 来源：互联网 | 2022-01-25 02:36
Vue实现商品列表的展示是一个比较简单的入门demo，下面是具体的实现：
简单CSS样式：
html：
Vue实现商品列表的展示是一个比较简单的入门demo，下面是具体的实现：
简单CSS样式：
html：
-
![]()
{{v.des}}
{{v.price}}
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实现商品列表的展示详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
京公网安备 11010802041100号