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)可以直接獲取，可以去學(xué)習(xí)一下) 通過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ù)劫持，造成邏輯處理速度極慢（取值同樣如此），可能我們在平時的代碼上感受不到，如果將一個比較復(fù)雜的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)文章
Vue+jsPlumb實現(xiàn)連線效果(支持滑動連線和點擊連線)
jsPlumb 是一個比較強大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實現(xiàn)連線效果，同時支持滑動連線和點擊連線，感興趣的可以了解一下2023-01-01
本篇文章主要介紹了詳解vue-cli 腳手架項目-package.json，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了vue+js實現(xiàn)微信上傳圖片選擇功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中eslint導(dǎo)致的報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家詳細介紹了Vue組件Draggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue.js 實現(xiàn)圖片本地預(yù)覽 裁剪 壓縮 上傳功能
這篇文章主要介紹了vue.js 實現(xiàn)圖片本地預(yù)覽裁剪壓縮上傳功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue之el-form表單校驗以及常用正則，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue elementUI使用tabs與導(dǎo)航欄聯(lián)動
這篇文章主要為大家詳細介紹了vue elementUI使用tabs與導(dǎo)航欄聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了vue中for循環(huán)作用域問題處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11