<template> <div class="box" :style="styleVar"> 111 </div></template><script>export default { name: 'HelloWorld', props: { height: { type: Number, default: 200 } }, computed: { styleVar() { return { '--box-height': this.height + 'px', '--box-color': '#000000' } } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped> .box { height: var(--box-height); background: var(--box-color); }</style
- 计算属性定义样式
- 行内引入定义的变量
- css中就可以使用变量
