1.簡(jiǎn)介
通過vue的學(xué)習(xí)，我們知道要使data中的樣式數(shù)據(jù)能夠在頁面中生效桂塞，我們可以通過動(dòng)態(tài)綁定標(biāo)簽的style或者class進(jìn)行處理篮条，但是通過這種操作進(jìn)行的話，在需要綁定多個(gè)樣式的時(shí)候踊跟，操作較為麻煩踩验。那么有沒有一種方法，使我們能夠在style標(biāo)簽里面直接寫data數(shù)據(jù)中的樣式呢商玫？話不多說箕憾，下面直接上代碼。
2.示例
- template中的代碼如下所示：
<template>
<div id="app">
<h1 ref="content">
小白要努力變強(qiáng)ＨＯ臁！
</h1>
</div>
</template>
- script中的代碼如下所示：
<script>
export default {
name: 'App',
data() {
return {
color: 'red'
}
},
mounted() {
this.$refs.content.style.setProperty('--color',this.color)
}
}
</script>
- style中代碼如下所示：
<style>
h1 {
color: var(--color);
}
</style>
-
效果如下圖所示：
效果圖
至此炬藤，在Style中引用data中的數(shù)據(jù)已完成御铃，希望能夠幫助您！Ｉ蚩蟆上真！
自己先給自己點(diǎn)個(gè)贊，沖案拧睡互！咱是最棒的！嘿嘿！觀看的小可愛一起點(diǎn)個(gè)贊唄就珠，求求了寇壳！
