vue 在css中如何引用data中的变量,取相反的颜色

<template>

<el-form

:model="action_form"

:rules="rules"

ref="action_form"

hide-required-asterisk

:style="styleVar"

>

<el-form-item prop="name" label="怎么称呼您">

<el-input

v-model="action_form.name"

placeholder="请输入姓名"

></el-input>

</el-form-item>

</el-form>

</template>

<script>

export default {

'error_color':'#fff'

},

computed: {

styleVar() {

return {

'--error_color': this.error_color,

}

}

}

data:{

ColorReverse: function (OldColorValue){

var OldColorValue = '0x'+OldColorValue.replace(/#/g,"");

var str='000000'+(0xFFFFFF-OldColorValue).toString(16);

this.error_color= '#' + str.substring(str.length-6,str.length);

},

}

</script>

<style scoped lang="less">

.el-form{

.el-form-item__content{

.el-form-item__error{

color:var(--error_color) !important;

}

}

}

</style>