vue3 动态绑定背景图片方法示例
作者：HeiYanjing
这篇文章主要为大家介绍了vue3动态绑定背景图片实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
有时候会遇到给img标签或者div设置背景图片的需求，资源文件可能需要经过二次判断来动态绑定。记录一下工作中遇到的坑
img标签src属性函数获取
这种方式可以避开绑定响应式数据响应式
<img
:src="getSource()"
alt=""
class="banner_img"
/>const getSource = () => {
return yesOrNo ?
new URL('../../path1', import.meta.url).href :
new URL('../../path2', import.meta.url).href
}sass语法设置背景图片
yesOrNo是响应式数据
.set_bg_img {
@if #{yesOrNo} {
background: url('img1');
}
@else {
background: url('img2');
}通过style，ref，reactive来绑定实现
backgroundImage格式依然按照规范来实现,这里用ref或者reactive来绑定back_image都可以实现。
<div :style="back_image">
const back_image = ref({
backgroundImage: yesOrNo ?
`url(${new URL('path1', import.meta.url).href})` :
`url(${new URL('path2', import.meta.url).href})`
})以上就是vue3 动态绑定背景图片的详细内容，更多关于vue3 动态绑定背景图片的资料请关注脚本之家其它相关文章！