Vue采用v-for显示图片列表

先上效果图：

HTML部分

   <div class="" id="box">
		<ul>
			<li v-for="v in list" :key="v.value">
				<img v-bind:src="v.src" alt="">
				<h4>{{v.des}}</h4>
				<p>{{v.price}}</p>
			</li>
		</ul>
	</div>

CSS部分

#box ul{
		display: flex;
		flex-wrap: wrap;
        position: absolute;
        top: 220px;
	}
#box li{
		padding: 3px;
		list-style: none;
		margin-right: 15px;
		border: 1px solid #eee;
}
#box img{
		width: 200px;
		height: 150px;
}

Script部分（写在data里~）

list:[
              {
                  value:'0',
                  src:require('../assets/TransformTri.jpg'),
                  des:'测试图',
                  price:198,
              },
              {
                  value:'1',
                  src:require('../assets/TransformTri.jpg'),
                  des:'测试图',
                  price:198,
              },
              {
                  value:'2',
                  src:require('../assets/TransformTri.jpg'),
                  des:'测试图',
                  price:198,
              }
          ]

前端小白一枚~ 在申请外校保研，导师给了个网站项目在做，自己也是边学边完成，有效果出来还是很快乐的，大家一起加油呀！