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