vue中css如何使用data中的變量
更新時(shí)間：2024年03月24日 14:28:03 作者：console.log( )
這篇文章主要介紹了vue中css如何使用data中的變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue css使用data中的變量
封裝一個(gè)ui組件，組件的樣式一般是多種多樣的
我們可以通過(guò)組件傳值的方式將ui屬性傳遞給組件，但是我們屬性是在js中可以拿到，vue3之前css是無(wú)法直接獲取的
(vue3中已經(jīng)可以直接獲取，可以去學(xué)習(xí)一下) 通過(guò)vars
那么在vue2中，我們要借助setProperty函數(shù)
寫一個(gè)簡(jiǎn)單的例子
<template>
<div class="home" ref="UI">
<div class="header">hello world</div>
</div>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
},
mounted(){
this.setUI()
},
methods:{
setUI(){
this.$refs.UI.style.setProperty("--color",this.color);//給變量賦值
}
}
}
</script>
<style>
.home{
.header{
color: var(--color); //使用變量
}
}
</style>看到另一種寫法
要簡(jiǎn)單一點(diǎn)，不需要借助setProperty函數(shù)
<template>
<div class="home" :style="myStyle">
<div class="header">hello world</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
data () {
return {
color: 'red'
}
},
computed: {
myStyle () :object{
return {
"--color": this.color,
}
}
},
})
</script>
<style>
.home{
.header{
color: var(--color); //使用變量
}
}
</style>vue中data變量使用的注意事項(xiàng)
因?yàn)樵赩ue中，data中的屬性往往都是用于雙向綁定，所以Vue會(huì)對(duì)其有劫持，所以我們?cè)趯?duì)data屬性進(jìn)行操作時(shí)，盡量不要對(duì)其直接操作
比如下面代碼：
export default {
data() {
return {
list: []
}
},
methods: {
init() {
for(let i = 0; i < 1000; i++) {
this.list.push({
key: i,
name: '張三'
});
}
console.log(this.list);
}
},
created() {
this.init();
}
}
最終打印結(jié)果如下：
可以看到包含一個(gè)Observer屬性，這是Vue自動(dòng)加上的。
上面代碼不斷向this.list中添加數(shù)據(jù)，這樣會(huì)造成過(guò)度數(shù)據(jù)劫持，造成邏輯處理速度極慢（取值同樣如此），可能我們?cè)谄綍r(shí)的代碼上感受不到，如果將一個(gè)比較復(fù)雜的canvas渲染動(dòng)畫放進(jìn)去，全部使用this屬性就會(huì)發(fā)現(xiàn)canvas渲染非常卡頓。
所以我們將init中代碼改成：
const list = [];
for(let i = 0; i < 1000; i++) {
list.push({
key: i,
name: '張三'
});
}
this.list = list;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue2.0實(shí)現(xiàn)自定義彈窗指令，當(dāng)標(biāo)簽有該指令時(shí)，點(diǎn)擊標(biāo)簽可以彈出彈窗。下面通過(guò)實(shí)例代碼給大家介紹Vue自定義彈窗指令的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue使用fengMap速度慢的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue組件高級(jí)通訊之$attrs與$listeners
這篇文章主要為大家介紹了Vue組件高級(jí)通訊之$attrs與$listeners使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue3?全局實(shí)例上掛載屬性方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了uni-app 的生命周期，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
當(dāng)遍歷一個(gè)數(shù)組或枚舉一個(gè)對(duì)象進(jìn)行迭代循環(huán)展示時(shí)，就會(huì)用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
使用vue-video-player實(shí)現(xiàn)直播的方式
在開發(fā)期間使用過(guò)video.js、mui-player等插件，發(fā)現(xiàn)這些video插件對(duì)移動(dòng)端的兼容性都不友好，最后發(fā)現(xiàn)一個(gè)在移動(dòng)端兼容不錯(cuò)的插件vue-video-player，下面通過(guò)場(chǎng)景分析給大家介紹使用vue-video-player實(shí)現(xiàn)直播的方法，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了uni-app?開發(fā)微信小程序定位,通過(guò)使用onLocationChange方法持續(xù)監(jiān)聽地址，根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度，需要的朋友可以參考下2022-04-04
vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))
有的功能需要設(shè)置必填項(xiàng),當(dāng)然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Rollup是一個(gè)JavaScript模塊打包器,它可以將多個(gè)小的JavaScript 模塊打包成一個(gè)大的模塊,本文主要介紹了Vite中Rollup打包的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03