在style中使用v-bind
最近在公司写项目的时候想实现一个更改主题的功能，查阅网上资料大家给了多种方案，但是其中一种方案比较吸引我，卧槽？什么东西，Vue3可以在style中使用v-bind？
WDF?！！！赶紧试试！
<script setup>
// 这里可以是原始对象值，也可以是ref()或reactive()包裹的值，根据具体需求而定
const theme = {
color: 'red'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
具体实现就如上，用法可以说相当简单了
Vue3通过给style样式中v-bind绑定，其实就是给css变量绑定，在绑定的数据更新时调用CSSStyleDeclaration.setProperty通知CSS更新
优缺点
-
优点
- 不用重新加载样式文件，在样式切换时不会有卡顿
- 在需要切换主题的地方利用v-bind绑定变量即可，不存在优先级问题
- 新增或修改主题方便灵活，仅需新增或修改JS变量即可，在- v-bind()绑定样式变量的地方就会自动更换
-
缺点
- IE兼容（想笑）
- 首次加载的时候可能会多花一点时间获取样式
- 只要绑定了，就会在绑定位置把属性编译成CSS变量，可能达到一定数量的时候会出现某些性能问题