Vue-demo（一）实现商品列表的展示

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

最终效果：