vue 2.0 中使用 css 变量

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<template> <div :style="styleText" class="div1"><br>　　<button @click="handleClick">修改颜色</button><br></div> </template> <script> export default {   data () { return { styleText: { '--text-color': 'red' } } },<br>methods: {handleClick () {<br>document.querySelector('.div1').style.setProperty('--text-color', 'blue');<br>}}, mounted () { // 获取 css 属性值 const color = getComputedStyle(document.documentElement).getPropertyValue('--text-color')   } }   </script> <style> .div1 { color: var(--text-color); } </style>