CSS属性动态赋值

CSS属性动态赋值 示例代码

CSS属性动态赋值步骤 声明全局变量

在变量名称前加两个中横线 --（使用–是因为$被Sass占用，@被Less占用）

注意：声明变量对大小写敏感（和表示两个不同的变量）

读取变量

使用var()函数来读取变量，var函数有两个参数，插入自定义的属性值

var(custom-property-name, value)//custom-property-name 必需，变量名
//value 可选，当属性不存在的时候使用

示例代码

<template><view :style="{'--my-num': myFontSize+‘px’}"><view class="my-num" @click="changeNum">666</view></view>
</template><script>export default {data() {return {myFontSize: 80}},methods: {changeNum() {this.myFontSize = Math.floor(Math.random() * (100)) + 1; //1到100的整数}}}
</script><style>.my-num {line-height: 200rpx;font-size: var(--my-num);}
</style>