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缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文主要介绍了element中el-table局部刷新的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue控制多行文字展开收起的实现示例（也叫控制文字展开隐藏），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了如何在Vue中使用CleaveJS格式化你的输入内容，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要给大家介绍了关于Vue2.x安装并使用SCSS的相关资料,以及如何在vue 2.x中全局引用公共scss文件,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue-router传参的四种方式超详细,有router-link路由导航方式传参，调用$router.push实现路由传参，通过路由属性name匹配路由，再根据params传递参数等等，结合示例代码讲解的非常详细，需要的朋友可以参考下2022-12-12
数组去重是我面试时候经常会问到应聘者的一个问题,所以下面这篇文章主要给大家介绍了关于前端vue数组去重的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
在Vue中,el-table是element-ui提供的强大表格组件,可以用于展示静态和动态表格数据,本文主要介绍了element-plus+Vue3实现表格数据动态渲染,感兴趣的可以了解一下2024-03-03
最新评论