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&g
·
先上效果图:
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,
}
]
前端小白一枚~ 在申请外校保研,导师给了个网站项目在做,自己也是边学边完成,有效果出来还是很快乐的,大家一起加油呀!
更多推荐
已为社区贡献1条内容
所有评论(0)