Question

我正在研究VueJS中的组件，该组件将显示条形图。为此，我需要计算一个数字，这就是为什么要计算它的原因。在我的SASS代码中，我有一个变量-$totalRows:，我想使用计算出的属性值进行初始化：萨斯：

<style lang="scss" scoped>
    //$totalRows: $someNum;
</style>

计算属性：

computed: {
   someNum(){
       return 10 //for example purposes
   }
}

任何想法我如何初始化$totalRows等于从someNum返回的值

Answer 1

编译进行生产时，您的scss样式将转换为css。由于计算的属性是在运行时评估的，因此不可能将计算的变量作为sass变量。

您可以使用内联样式来基于您的计算属性来设置样式。由于只要依赖数据的组件发生更改，都将重新呈现组件，因此您可以基于此设置诸如列宽之类的内容。

<div :style="styling"></div>

computed: {
  someNum() {
    return 10;
  },

  styling() {
    const fullWidth = 1000; //px

    return {
      width: fullWidth / this.someNum;
    }
  }
}

如果不需要计算变量，则可以share it between scss and javascript using json和一个scss json导入器。

使用在vue中定义的属性初始化sass变量，如计算

1 个答案: