Vue css 绑定变量这个方面你会用吗？

一般Vue 项目中样式上需要绑定某个变量都是通过:style 或者 :class 来绑定，这两种方法可能大部分可与处理，今天推荐大家另一种方法，直接在css 里面使用变量

1.HTML部分

    <div class="demo" :style="testStyle">测试</div>

2.data 或者组件传递props 的变量

      heightStr: '500',

3.vue 计算属性

 computed: {
    testStyle() {
      return {
        '--demo-height': this.heightStr + 'px',
      }
    },
  },

4.style 标签里面

<style lang="less" scoped>
.demo {
  border: 1px solid red;
  height: var(--demo-height);
}
</style>

最后你想要的盒子高度就变成了500PX啦

注意：

计算属性绑定的变量只能--开头