Vue2.0中使用less給元素新增背景圖片出現的問題

阿新 • • 發佈：2019-01-14

在使用less在Vue.js中給元素新增背景圖片時或者你會出現這樣的寫法

background-image: url('../img/' + @{bg_url} + '2x.png');

或者這樣

background-image: url('../img/' + @bg_url + '2x.png');

這樣

background-image: url(../img/@{bg_url}2x.png);

還有這樣

background-image: url(../img/@bg_url2x.png);

這樣的

background-image: url(../img/@{bg_url} 
@2x.png);

如果都有其中一種，恭喜你都錯了~~~

VUE會在命令列給你出現報錯，比如這樣：

這裡寫圖片描述

而瀏覽器也會給你溫馨提示：

這裡寫圖片描述

在less當中當中給元素設定背景圖‘ ’是必須加的，而且變數必須是@{ 變數名 }這樣的格式去書寫，在@{ 變數名 }後面不允許出現@符號 否則會出現報錯，因為他在編譯過程中會認為你@{ 變數名 }後面的@符號是一個變數，並且檢測到你的變數未規範書寫URL裡面的要求。所以使用less在給元素新增背景圖設定URL時安裝下面這個寫法就可以完美實現無報錯

background-image: url('../img/@{bg_url}2x.png');

在使用less設定背景圖使用變數時，儘量避免圖片名稱帶有@符號，以減少不必要的麻煩

Vue2.0中使用less給元素新增背景圖片出現的問題

在使用less在Vue.js中給元素新增背景圖片時或者你會出現這樣的寫法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者

Vue2.0中獲取dom元素

Vue.js雖然說是資料驅動頁面的，但是有時候我們也要獲取dom物件進行一些操作。 vue的不同版本獲取dom物件的方法不一樣 Vue.js 1.0版本中，通過v-el繫結，然後通過this.els.XXX來獲取 Vue.js 2.0版本中。我們通過給元素繫結re

PyQt4中給QWidget新增背景圖片或者更換背景色

class Emit(QtGui.QWidget): def __init__(self, parent=None): QtGui.QWidget.__init__(self, parent) self.setGeometry(300, 300, 200, 100)

給UITextView新增背景圖片

UITextView *userNameText = [[UITextField alloc]init]; //新增使用者名稱文字框背景圖片 UIImageView *userImgView=[[UIImageView alloc] initWithFrame:userN

js給網頁中所有p元素新增onclick事件

jQuery 練習一：給網頁中所有的元素新增 onclick 事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script src="js

Vue2.0中v-for叠代語法變化（key、index）

分鐘 eth data href head htm ref fields type 語法發生了變化：http://blog.csdn.net/sinat_35512245/article/details/53966788 新數組語法 value in arr (value,

vue2.0 中#$emit,$on的使用詳解

額外 return turn isp div 傳遞 call sele 發的 vue1.0中 vm.$dispatch 和 vm.$broadcast 被棄用，改用$emit,$on 1. vm.$on( event, callback ) 監聽當前實例上的自定義事件。

vue2.0中的watch和計算屬性computed

str rect register rst 定向 one 特點 created doc watch和computed均可以監控程序員想要監控的對象，當這些對象發生改變之後，可以觸發回調函數做一些邏輯處理 watch監控自身屬性變化 <!DOCTYPE html&

vue2.0中使用sass

oba html 例子 round ron src 括號 logs 大型第一部分：Sass語言 Sass是一種強大的css擴展語言（css本身並不是一門語言），它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言（如Java、C#、Ruby等）

在Vue2.0中集成UEditor 富文本編輯器

main button all 分享 init htm temp con AD 在vue的’項目中遇到了需要使用富文本編輯器的需求，在github上看了很多vue封裝的editor插件，很多對圖片上傳和視頻上傳的支持並不是很好，最終還是決定使用UEditor。這類的文章網

vue2.0中實現首字母大寫的過濾器

過濾器1:實現一個首字母大寫的過濾器(vue2.0中已經去除了內置的過濾器)過濾器本身就是一個函數vue2.0中實現首字母大寫的過濾器

vue2.0中v-on綁定自定義事件的理解

按鈕自定義事件監聽器 code 自定義 pre strong 數據解耦 vue中父組件通過prop傳遞數據給子組件，而想要將子組件的數據傳遞給父組件，則可以通過自定義事件的綁定。每個Vue實例都實現了【事件接口】，即： 1、使用 $on(eventName) 監聽事

vue2.0中的：is和is的區別

此文首發於 lijing0906.github.io/ 最近，工作之餘在翻閱vue.js的官方文件，在檢視到動態元件和解析 DOM 模板時的注意事項的時候，講到一個特殊的is特性，覺得很有意思，就來寫一篇自己理解的總結。現場寫栗子實踐其實看過之後，其實是有點懵的，

vue2.0中v-on繫結自定義事件

vue中父元件通過prop傳遞資料給子元件，而想要將子元件的資料傳遞給父元件，則可以通過自定義事件的繫結。每個 Vue 例項都實現了事件介面，即：使用 $on(eventName) 監聽事件使用 $emit(eventName) 觸發事

安裝vue2.0中vue-easy-slider的滑塊元件外掛

安裝 npm i -S vue-easy-slider demo1： <template> <slider animation="fade"> <slider-item v-for="(i, index) in list" :key="index"&g

VB.net中，給類新增事件

定義一個全新的類 Public Class TestEvent Public Event testEvent_Name(ByVal testString As String) '定義一個事件，差不多像一個函式宣告，也想一個委託宣告 Public Sub

android開發利用Service給遊戲新增背景音樂

1、增加一個類，這個類是繼承Service的，如下。 Java程式碼 package com.zhw.game8; /** * Created by 得已 on 2018/9/19. */ import android.app.Service; import an

Intellij IDEA 中如何給Maven新增依賴

熟悉IDEA的同鞋都知道IDEA很強大，非常強大，讓我這個使用了N年Eclipse的忠實者也轉移到了的IDEA的陣營，今天說下，如何在IDEA中的Maven專案中新增第三方的Jar依賴，其實很簡單，請看圖: 1.先開啟專案中的pom.xml檔案,並使用快捷鍵 Alt+

Vue2.0中使用v-el,v-rel出現問題

問題描述在高仿餓了麼實戰專案中使用v-el指令獲取DOM，但出現下圖的錯誤： v-el指令程式碼 template template script script

Vue2.0中使用less給元素新增背景圖片出現的問題

相關推薦