在 Vue css 中是否有获取数据属性值的选项?
<template>
<p data-background="purple"> TEST </p>
</template>
<style lang="scss">
p {
background: attr(data-background); //error
&:after {
background: attr(data-background); //error
}
}
</style>
最佳答案
你可以使用 CSS variables对于这种情况。
new Vue({
el: '#app',
data: {
elStyle: {
'--background': 'lightblue',
}
}
});
p:after {
content: 'A pseudo element';
background: var(--background, red); // Red is the fallback value
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p :style="elStyle"></p>
</div>
关于css - Vue - 在CSS中获取数据属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55071287/