vue在scss中使用data的变量

场景：使用vant框架的时候，需要动态改变元素的字体颜色templete<van-checkbox :style="cssVars" v-model="this.checked">{{txt}}</van-checkbox>computedcomputed:{cssVars() {return {"--color": this.color};},

我的大树

3506人浏览 · 2022-04-12 14:54:43

我的大树 · 2022-04-12 14:54:43 发布

场景：使用vant框架的时候，需要动态改变元素的字体颜色

templete

<van-checkbox :style="cssVars" v-model="this.checked">{{txt}}</van-checkbox>

computed

computed:{
        cssVars() {
            return {
                "--color": this.color
            };
        },
    },

scss

<style lang="scss" scoped>
    /deep/ .van-checkbox__label{
        color: var(--color)
    }
</style>

THE END

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^