vue遍历图片并水平排布

最新推荐文章于 2024-04-21 21:55:54 发布

原创最新推荐文章于 2024-04-21 21:55:54 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何使用Vue框架来遍历图片并实现水平布局。通过示例展示HTML、JS和CSS代码，帮助读者理解Vue中图片遍历及布局的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

html代码：

<div class="headItem" v-for="(i,index) in item1" :key="i.id" >
	<span class="headImg">
		<img :src="i.src"/>
	</span>
	<span class="headName">
		{{i.name}}
	</span>
	<span class="headNumber">
		{{i.number}}
	</span>
</div>

js代码：

<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				item1:[
					{
	  			  	name:"目标利润测算",
	  			  	number:"20",
	  			  	 "src":'img/目标利润测算.png',
	  			  },{
	  			  	name:"总控计划",
	  			  	number:"12",
	  			  	"src":'img/总控计划.png',
	  			  },{
	  			  	name:"总包产值",
	  			  	number:"12",
	  			  	"src":'img/总包产值.png',
	  			  },{
	  			  	name:"分包成本",
	  			  	number:"12",
	  			  	"src":'img/分包成本.png',
	  			  },{
	  			  	name:"签证批价",
	  			  	number:"12",
	  			  	"src":'img/签证批价.png',
	  			  },{
	  			  	name:"定案/结算(总包)",
	  			  	number:"12",
	  			  	"src":'img/定案结算（总包）.png',
	  			  },{
	  			  	name:"分包结算",
	  			  	number:"12",
	  			  	"src":'img/分包结算.png',
	  			  },
				],
               }
           })
</script>

css代码：

.headItem{
			background-color: #FFFFFF;
			width: 16rem;
	    	position: relative;
	    	display: flex;
	    	align-items: center
		}
		.headImg{
			position: absolute;
			left: 1.25rem;
		}
		.headName{
			position: absolute;
			left: 4.8rem;
			color: #303133;
			font-size: 1rem;
		}
		.headNumber{
			position: absolute;
			left: 13.4rem;
			color: #457BF7;
			font-size: 1rem;
		}