vue 2.0 中使用 css 变量

<template>
<div :style="styleText" class="div1">
　　<button @click="handleClick">修改颜色</button>
</div>
</template>
<script>
export default {

data () {
return {
styleText: {
'--text-color': 'red'
}
}
},
methods: {

handleClick () {
document.querySelector('.div1').style.setProperty('--text-color', 'blue');
}

},
mounted () {
// 获取 css 属性值
const color = getComputedStyle(document.documentElement).getPropertyValue('--text-color')

}
}

</script>
<style>
.div1 {
color: var(--text-color);
}
</style>