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