vue使用CSS變量詳解
更新時間：2025年12月17日 09:25:54 作者：V。on
文章講解了如何在Vue項目中使用CSS變量,包括動態(tài)計算值和根據(jù)條件計算屬性,通過示例展示了如何使用CSS變量來實現(xiàn)動畫效果和動態(tài)樣式
vue使用CSS 變量
首先，我們要先知道什么是CSS變量
在我們知道什么是CSS變量之后，我們嘗試把它在項目中運用起來，一些需要動態(tài)計算的值，我們就可以使用它快速的實現(xiàn)效果。
示例一
其中keyframes是不能直接在html中書寫的，那么如何不使用js就能根據(jù)傳入的值達到對應(yīng)的效果呢？
如下：
<template>
<div
:style="{ '--deviation': '-' + deviation }"
class="text"
>
{{ text }}
</div>
</template>
<script>
export default {
name: 'QTest',
props: {
text: {
type: String,
default: '請傳入內(nèi)容'
},
// 動態(tài)傳入不同的值，根據(jù)不同的值得出最終的樣式
deviation: {
type: String,
default: '75%'
}
},
}
</script>
<style lang="scss" scoped>
.text {
width: 100px;
overflow: hidden;
transition-delay: 5s;
animation: itemSlide 5s linear infinite;
}
@keyframes itemSlide {
0% {
transform: translateX(0%);
}
100% {
/*使用變量*/
transform: translateX(var(--deviation));
}
}
</style>
示例二
有的時候，一些屬性我們可能需要根據(jù)一些條件計算得來，那么也能很好的去使用它。
如下：
<template>
<div
:style="{ '--lineheight': lineheight }"
class="text"
>
<div class="container"></div>
</div>
</template>
<script>
export default {
name: 'QTest',
props: {
lineheight: {
type: String,
default: '200px'
}
},
}
</script>
<style lang="scss" scoped>
.text {
width: 100px;
height: 400px;
overflow: hidden;
.container {
height: calc(100% - var(--lineheight));
background-color: red;
}
}
</style>
就得到一個高度為200px的盒子：
補充：
獲取元素樣式：getComputedStyle([el])
const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--lineheight')).trim()
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實現(xiàn)樣式的作用域,本文小編就來分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了從源碼角度來回答keep-alive組件的緩存原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Nginx是一款輕量級的Web服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項目的相關(guān)資料,需要的朋友可以參考下2022-02-02
在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表
這篇文章主要介紹了在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文介紹了Vue3的基礎(chǔ)概念,包括響應(yīng)式系統(tǒng)、組合式API和更好的TypeScript支持,同時,文章手把手教你如何搭建Vue3開發(fā)環(huán)境,使用Vite創(chuàng)建項目,并解析了項目的結(jié)構(gòu),通過這些內(nèi)容,讀者可以快速上手Vue3,并為后續(xù)的學(xué)習(xí)打下堅實的基礎(chǔ),感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue大型項目之分模塊運行/打包的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作，對Vue感興趣的同學(xué)，可以來學(xué)習(xí)一下2021-05-05
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實現(xiàn),?這個宏用來聲明一個雙向綁定?prop,下面我們就來看看他的具體使用吧2024-03-03