在css中使用js定义的变量

<template>
  <h1>Vue</h1>
</template>
 
<script>
export default {
  data () {
    return {
//声明变量
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>
 
<style scoped>
h1 {
  color: var(--color);
  border: var(--border);
}

</style>