vue遍历图片并水平排布

最新推荐文章于 2024-03-01 19:40:58 发布

张日琪

最新推荐文章于 2024-03-01 19:40:58 发布

阅读量2.7k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45607006/article/details/119330183

版权

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

摘要由CSDN通过智能技术生成

效果图：

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":'