vuejs設置css,vuejs怎麼用

本文目錄一覽：

• 1、vue.js怎麼動態設置css
• 2、vue css偽元素after的使用
• 3、解決vuejs項目里css引用背景圖片不能顯示的問題
• 4、Vue3中CSS的新玩法-CSS模塊 amp; 動態CSS

vue.js怎麼動態設置css

template

ul

li v-for=”tab in tabs” :class=”{ ‘is-active’: tab.isSelected}”

a :href=”tab.href” @click=”selectTab(tab)”{{tab.name}}/a

/li

/ul

script

selectTab(selectedTab) {

this.tabs.forEach(tab = {

tab.isSelected = (tab.name == selectedTab.name);

})

}

vue css偽元素after的使用

開篇一句話：CSS的偽類，偽元素就當成vue的過濾器使用就好了，我也是想到這個突然就茅塞頓開了。

用法：

:after 選擇器表示向選定的元素之後插入內容。

要有content屬性

需求舉例：div按鈕後面有個朝下的ico,點擊div後 ico方向朝上

實現辦法:

1.可以使用JS實現，div的class名綁定到一個變數上，根據變數的真假值更換class

2.偽類的實現方法

先說思路：

要藉助兩個class，基礎class(‘base_class’)和激活class(‘rotate’).

base_class

相對定位。

base_class:after

放ico朝上的樣式，絕對定位。

rotate不要單獨加after，不然會取代掉base_class的after,

要兩個class都出現才加after

rotate綁定到一個布爾變數上，該變數的真假值由open_select_window更改

html:

解決vuejs項目里css引用背景圖片不能顯示的問題

解決：build-utils.js里，修改：增加

publicPath:’../../’,

if

(options.extract)

{

return

ExtractTextPlugin.extract({

use:

loaders,

publicPath:’../../’,

fallback:

‘vue-style-loader’

})

}

else

{

return

[‘vue-style-loader’].concat(loaders)

}

以上這篇解決vuejs項目里css引用背景圖片不能顯示的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:解決vue打包之後靜態資源圖片失效的問題解決vue打包css文件中背景圖片的路徑問題詳談vue+webpack解決css引用圖片打包後找不到資源文件的問題vue

cli使用絕對路徑引用圖片問題的解決關於Vue背景圖打包之後訪問路徑錯誤問題的解決

Vue3中CSS的新玩法-CSS模塊 amp; 動態CSS

Vue3對CSS支持加入了更多的特性支持，這樣的話，我們在項目當中使用CSS就變得更加靈活了，來吧我們直接上乾貨

在style的標籤上加一個module的屬性，這樣style裡面的內容就會被編譯成CSS Modules（模塊），默認情況下，我們可以在模板代碼里，或者JS里通過$style拿到所有樣式屬性並使用

我們也可以給CSS Modules自定義一個名稱，在style的module屬性設置一個名稱就可以了,這樣的話在模板和JS里就通過自定義的名稱來引入CSS里的屬性

與組合式 API 一同使用，注入的類可以通過 useCssModule API 在 setup() 和 .success { color: #090; }

可以通過 v-bind 這一 CSS 函數將 CSS 的值關聯到動態的組件狀態上

這個語法同樣也適用於