vue template當(dāng)中style背景設(shè)置不編譯問題
更新時間：2022年04月15日 11:29:06 作者：luguz
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
template中style背景設(shè)置不編譯
在vue定義的組件當(dāng)中，直接設(shè)置行內(nèi)style無法顯示背景，里面使用config.resolve.alias當(dāng)中設(shè)置的 @等路徑符也無法識別
<el-card style="backgroundImage:`url(`圖片地址`)" class="box-card" shadow="hover">
解決方法
在將圖片資源在vue 的 data當(dāng)中解析再綁定到頁面
<el-card :style="{backgroundImage:`url(${img})`}" class="box-card" shadow="hover">
// data當(dāng)中定義 組件需要在函數(shù)當(dāng)中返回數(shù)據(jù) 保證數(shù)據(jù)的作用域
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>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue項目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了Vue slot插槽的使用，在生活中很多地方都有插槽，電腦usb的插槽，插板當(dāng)中的電源插槽，插槽的目的是為了讓我們原來的設(shè)備具備更多的擴展性比如電腦的USB我們可以插入U盤，手機，鼠標(biāo)，鍵盤等等，下面文章就來介紹Vue slot插槽是如何使用的2021-10-10
本文給大家介紹了在vue項目中使用svg圖標(biāo)的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-04-04
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下2018-09-09
基于Vue實現(xiàn)Excel解析與導(dǎo)出功能詳解
導(dǎo)入導(dǎo)出excel這是前端做管理系統(tǒng)最常用的功能了,下面這篇文章主要給大家介紹了基于Vue實現(xiàn)Excel解析與導(dǎo)出功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要給大家介紹了關(guān)于vue項目history模式刷新404問題的解決辦法,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue-cli設(shè)置css不生效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue3 中的 hooks 就是函數(shù)的一種寫法,就是將文件的一些單獨功能的js代碼進行抽離出來進行封裝使用,下面我們就來看看vue3中自定義Hooks函數(shù)的使用吧2023-09-09
vue發(fā)送websocket請求和http post請求的實例代碼
這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07