uniapp 动态修改 css 样式

css 使用 var 注入变量，

达到设置动态样式的需求 声明 css 变量时，

1. 变量名前面要加两根连词线（--）；
2. 变量使用 kebab-case 命名方式，即 --header-color 而不是 --headerColor；
3. 变量名大小写敏感，--header-color 和 --Header-Color 是两个不同的变量名；
4. var() 函数用于读取变量。

接下来，看一下具体实现代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<template>     <view class="header" :style="[headerStyle]">头部内容</view> </template>    <script>     export default {         name:"test",         data() {             return {                 headerStyle: {                     '--header-color': 'pink'                 }             };         }     } </script>    <style lang="scss" scoped> .header {     width: 100px;     text-align: center;     line-height: 100rpx;     border: 1px solid #aaa;     color: var(--header-color); } </style>