css中使用data中的变量

作者：一键难忘520 | 2024-08-04 14:56:18

踩

css中使用data中的变量

data() {
  return {
    myColor:"#2a9efb",
  };
},
1
2
3
4
5

说明：这里其实类似于设置 document.documentElement.style.setProperty('--myColor', myColor),而我们现在只是给div设置了变量属性，并且是在当前页面设置的，所以可以在style中直接通过动态样式的方式定义

<template>
  <div class="chat-message" :style="{'--myColor':myColor}">
    测试数据
  </div>
</template>

1
2
3
4
5
6

.chat-message {
    background: var(--myColor);
}
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/928311