css 使用 var 注入变量,
达到设置动态样式的需求 声明 css 变量时,
- 变量名前面要加两根连词线(–);
- 变量使用 kebab-case 命名方式,即 –header-color 而不是 –headerColor;
- 变量名大小写敏感,–header-color 和 –Header-Color 是两个不同的变量名;
- var() 函数用于读取变量。
接下来,看一下具体实现代码:
<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>
微信公众号
手机浏览(小程序)
Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages:
error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
Warning: get_headers(): Failed to enable crypto in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_2575.jpg): failed to open stream: operation failed in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57