vue动态绑定css雪碧图

最新推荐文章于 2022-03-23 14:35:39 发布

Knight_SQ

最新推荐文章于 2022-03-23 14:35:39 发布

阅读量260

点赞数

分类专栏： javascript vue 雪碧图文章标签： vue js javascript

本文链接：https://blog.csdn.net/sq66666666/article/details/114384106

版权

javascript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

雪碧图

1 篇文章 0 订阅

订阅专栏

其实原理很简单，一个简单的钩子函数 + 字符串拼接！！！

接下来，小刀拉屁股，让你开开眼！！！

html部分

<body>
	<div id="app">
		//data是从后台获取到的数据
		<div v-for="(item,index) in data" :key="index" class="tupian" :style="setStyle(item)"></div>
	</div>
</body>

函数部分

methods: {
	//钩子函数动态绑定css样式
	setStyle(item) {
		//这里的this.image是我从后台获取到的图片地址，你的是什么属性名就写什么
		return 'background-position:' + (-item.icon.x) + 'px ' + (-item.icon.y) + 'px;background-image:url(' + this.image +')'
	},
}

SO这样就完成了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Knight_SQ

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue动态绑定css雪碧图

其实原理很简单，一个简单的钩子函数 + 字符串拼接！！！接下来，小刀拉屁股，让你开开眼！！！html部分<body> <div id="app"> //data是从后台获取到的数据 <div v-for="(item,index) in data" :key="index" class="tupian" :style="setStyle(item)"></div> </div></body>函数部分method
复制链接

扫一扫