Vue中解决img标签动态:src绑定

最新推荐文章于 2024-08-28 21:51:41 发布

原创最新推荐文章于 2024-08-28 21:51:41 发布 · 672 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

Vue.js

4 篇文章

订阅专栏

本文介绍了如何在uniapp的uView框架中使用Vue的动态数据绑定功能，展示了一个示例，展示了如何通过JavaScript在img标签中根据数据动态设置src属性，实现列表中图片的懒加载效果。

有的时候我们需要在img标签中动态绑定数据

//例子用的是uniapp，UI框架是uView
<template>
	<view v-for="(item, index) in awardsIconList" :key="index">
		<u-image width="200rpx" :src="item.value" mode='widthFix'></u-image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				awardsIconList: [],
			}
		},
		onLoad() {
			this.getIcon();
		},
		method:{
			getIcon(){
				const list = new Array();
				list.push({
					id: i,
					value: require('@/static/images/icon/nan.png')
				});
				list.push({
					id: i,
					value: require('@/static/images/icon/nv.png')
				});
				list.push({
					id: i,
					value: require('@/static/images/icon/shehuituanti.png')
				});
				this.awardsIconList = list;
			}
		}
	}
<script>