亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中css如何使用data中的變量

 更新時(shí)間：2024年03月24日 14:28:03   作者：console.log( )  
這篇文章主要介紹了vue中css如何使用data中的變量問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue css使用data中的變量

封裝一個(gè)ui組件，組件的樣式一般是多種多樣的

我們可以通過組件傳值的方式將ui屬性傳遞給組件，但是我們屬性是在js中可以拿到，vue3之前css是無法直接獲取的

(vue3中已經(jīng)可以直接獲取，可以去學(xué)習(xí)一下)  通過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ì)造成過度數(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)文章

最新評(píng)論