vue3 动态绑定背景图片方法示例

更新时间：2023年10月31日 08:46:36 作者：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 动态绑定背景图片的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue的keep-alive用法技巧
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。
2019-08-08
解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-06-06
vue2安装vue-router报错的解决方法
vue-router的安装不是理想化的,会出现问题,需要静下心认真研究,熬过去就会懂得更多,这篇文章主要给大家介绍了关于vue2安装vue-router报错的解决方法,需要的朋友可以参考下
2022-03-03
解决Vue.js由于延时显示了{{message}}引用界面的问题
今天小编就为大家分享一篇解决Vue.js由于延时显示了{{message}}引用界面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
基于Vue3+TypeScript实现鼠标框选功能
这篇文章主要介绍了基于Vue3+TypeScript实现鼠标框选功能,文中通过代码示例给大家讲解的非常纤细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-07-07
Vue面试中observable原理详解
这篇文章主要为大家介绍了vue面试observable原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
详解Vue中的keep-alive
这篇文章主要为大家介绍了Vue中的keep-alive，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
element的el-tree多选树(复选框)父子节点关联不关联
最近想要实现多选框关联的功能，但是却出现了element的el-tree多选树(复选框)父子节点关联不关联的问题，本文就来介绍一下解决方法，一起来了解一下
2021-05-05
vue中的数据绑定原理的实现
本篇文章主要介绍了vue中的数据绑定原理的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue实现导航栏菜单
这篇文章主要为大家详细介绍了Vue实现导航栏菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08