VUE 动态绑定本地图片

meng_xiaoxiao

已于 2022-07-17 15:03:24 修改

阅读量281

点赞数

分类专栏： Vue项目案例文章标签： vue.js javascript

于 2022-06-16 15:06:49 首次发布

本文链接：https://blog.csdn.net/meng_xiaoxiao/article/details/125316349

版权

Vue项目案例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文通过一个OK的案例展示了如何使用Vue进行列表渲染，利用`v-for`指令结合类绑定和图片源属性来展示卡片数据。每个卡片包含标题和计数，并使用背景颜色区分。同时，提供了一个不OK的案例，指出直接使用字符串路径代替了图片的require引用。

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

ok 案例：

<ul>
	<li v-for="item in cards" :class="[item.bg]">
		<img :src="item.img">
		<div>
			<h6>{{item.title}}</h6>
			<span>60</span>
		</div>
	</li>
</ul>

const cards=[
		{
			title:'订单数量',
			img:require('../assets/images/summary1.png'),
			bg:'b1',
			prop:''
			
		},
		{
			title:'支付订单数',
			img:require('../assets/images/summary2.png'),
			bg:'b2',
			prop:''
			
		},
		{
			title:'成交总金额',
			img:require('../assets/images/summary3.png'),
			bg:'b3',
			prop:''
			
		}
	]

不ok的做法：

{
           title:'成交总金额',
           img:'../assets/images/summary3.png',
           bg:'b3',
           prop:''
   }