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

tech2022-08-17  144

先上效果图: 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, } ]

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

最新回复(0)