Vue3在css中使用js變量及其原理解讀
更新時間：2023年09月13日 14:14:13 作者：靜尾
這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結合實例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細，需要的朋友可以參考下
Vue3在css中使用js變量及其原理解讀
實現(xiàn)原理
首先css中是有變量的，可以像js變量一樣在style中使用，然后Vue3支持將js中的變量傳入style中，相當于在css中創(chuàng)建了同名的變量，值綁定到js變量上，后續(xù)會跟著js中的變量一同響應式變化。
CSS變量介紹
CSS變量的聲明方式：
--color: red;
CSS變量的使用方式：
h1 {
color: var(--color);
}作用域：
body {
--color: red;
}
h1 {
color: var(--color); /** 這里獲取到的是全局聲明的變量，值為red **/
}
div {
--color: blue;
color: var(--color); /** 這里獲取到的是局部聲明的變量，值為blue **/
}變量的作用域就是它所在的選擇器的有效范圍。
默認值：
div { width: var(–width, 100px) }
假如沒有定義 --width 變量，那么就會取第二個參數(shù)的值，這就很適合我們用來封裝組件。
在 vue3 的 <style> 中使用 <script> 里的變量的方式
創(chuàng)建一個 vite 項目（vue-cli創(chuàng)建的不可）:
npm init vite-app vars
項目初始化
編寫代碼：
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
border: '1px solid black',
color: 'red'
}
}
}
</script>
<style vars="{ border, color }" scoped>
h1 {
color: var(--color);
border: var(--border);
}
</style>且在style中的變量也是響應式的。
原理：vue控制的是元素的style屬性，使其動態(tài)變化。
使用全局變量的方式：
<style vars="{ color }" scoped>
h1 {
color: var(--global:color);
}
</style>兼容性：不兼容IE
vue3中css使用script中定義的變量
代碼
<template>
<div class="box">haha</div>
</template>
<script setup lang="ts">
const boxWidth = '500px'
</script>
<style lang="scss">
.box {
width: v-bind(boxWidth);
height: 200px;
background-color: red;
}
</style>效果
到此這篇關于Vue3在css中使用js變量及其原理解讀的文章就介紹到這了,更多相關vue3在css中使用js變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了如何基于vue實現(xiàn)動態(tài)Tab標簽頁功能,文中通過代碼示例和圖文結合的方式給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-09-09
詳解vue3?defineModel如何實現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開發(fā)者可以更加簡潔地實現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來學習一下如何使用defineModel實現(xiàn)雙向綁定吧2024-12-12
element el-table如何實現(xiàn)表格動態(tài)增加/刪除/編輯表格行(帶校驗規(guī)則)
這篇文章主要介紹了element el-table如何實現(xiàn)表格動態(tài)增加/刪除/編輯表格行(帶校驗規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了詳解vue.js全局組件和局部組件，實例分析了全局組件和局部的技巧，有興趣的可以了解一下。2017-04-04
這篇文章主要為大家詳細介紹了VUE實現(xiàn)吸底按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了如何解決vue項目打包后文件過大問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3+ts使用Echarts的實例詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue2更改data里的變量不生效時,深層更改data里的變量問題
這篇文章主要介紹了vue2更改data里的變量不生效時,深層更改data里的變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
這篇文章主要介紹了Vue中注冊全局組件的三種方式,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11