先上效果图: 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, } ]前端小白一枚~ 在申请外校保研,导师给了个网站项目在做,自己也是边学边完成,有效果出来还是很快乐的,大家一起加油呀!