vue template当中style背景设置不编译问题
更新时间：2022年04月15日 11:29:06 作者：luguz
这篇文章主要介绍了vue template当中style背景设置不编译问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
template中style背景设置不编译
在vue定义的组件当中，直接设置行内style无法显示背景，里面使用config.resolve.alias当中设置的 @等路径符也无法识别
<el-card style="backgroundImage:`url(`图片地址`)" class="box-card" shadow="hover">
解决方法
在将图片资源在vue 的 data当中解析再绑定到页面
<el-card :style="{backgroundImage:`url(${img})`}" class="box-card" shadow="hover">
// data当中定义 组件需要在函数当中返回数据 保证数据的作用域
data: function(){
return {
weatherData:{},
img: require('@assets/image/sunny_n.jpg')
}
},如何给template组件加背景
<template>
<div class="index_background" >
</div>
</template>
<style>
.index_background{ background: url('~@/../static/images/login-bg.png') center top no-repeat;}
</style>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
又是一个老生常谈的功能，接下来会从零实现一个万年日历，从布局到逻辑，再到随处可见的打卡功能。文中的示例代码简洁易懂，需要的可以参考一下2023-01-01
这篇文章主要介绍了Vue 事件的$event参数=事件的值案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
vue3+高德地图只展示指定市、区行政区域的地图以及遮罩反向镂空其他地区
vue大屏项目开发,客户觉得地图上的文字标注太多了,要求地图上只显示省市等主要城市的标注,这篇文章主要给大家介绍了关于vue3+高德地图只展示指定市、区行政区域的地图以及遮罩反向镂空其他地区的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue中遇到的坑之变化检测问题（数组相关） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2023-03-03
这篇文章讲给大家详细介绍一下Vue如何实现登录后添加动态路由并跳转，文章通过代码示例介绍的非常详细，对我们的学习或工作有一定的的帮助,需要的朋友可以参考下2023-07-07
本篇文章主要介绍了Vue.js通用应用框架-Nuxt.js的上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消，本文主要介绍了vue-router之路由钩子函数应用小结，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
vue+jquery+lodash实现滑动时顶部悬浮固定效果
这篇文章主要为大家详细介绍了vue+jquery+lodash实现滑动时顶部悬浮固定效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
本文主要介绍了Vue.js实现全屏背景图片滑动切换特效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
最新评论