1.簡介
通過vue的學習，我們知道要使data中的樣式數(shù)據(jù)能夠在頁面中生效，我們可以通過動態(tài)綁定標簽的style或者class進行處理，但是通過這種操作進行的話，在需要綁定多個樣式的時候，操作較為麻煩。那么有沒有一種方法，使我們能夠在style標簽里面直接寫data數(shù)據(jù)中的樣式呢？話不多說，下面直接上代碼。
2.示例
- template中的代碼如下所示：
<template>
<div id="app">
<h1 ref="content">
小白要努力變強！?。? </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ù)已完成，希望能夠幫助您?。?！
自己先給自己點個贊，沖?。≡凼亲畎舻?！嘿嘿！觀看的小可愛一起點個贊唄，求求了！
