前端 - vue中如何把scss文件中的值变成动态的？

问题描述：

请教一下这样写为什么浏览器解析不了值 width直接没有了

 computed: {
    material_source_width() {
      return this.detailData.material_source == '2' ? '25%' : '33%'
    }
  }, 
<style lang="scss">
  $material-source-width: #{material_source_width};

  .information-right-item {
    display: flex;
    width: $material-source-width;
  }
</style>

第 1 个答案：

scss是css预编译,所以根本不会在浏览器参与任何计算,
你应该换个思路,用css变量来实现.
这个是简单的demo: Vue SFC Playground

第 2 个答案：

https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css

第 3 个答案：

可以在style里把值传进去

    <div class="information-right-item" :style="{'--width': detailData.material_source == '2' ? '25%' : '33%'}"></div>

.information-right-item{
  display: flex;
  width: var(--width);
}

第 4 个答案：

<template>
  <div :style="{ width: material_source_width }" class="information-right-item">
    
  </div>
</template>

<script>
export default {
  computed: {
    material_source_width() {
      return this.detailData.material_source == '2' ? '25%' : '33%'
    }
  },
}
</script>

<style lang="scss">
  .information-right-item {
    display: flex;
   
  }
</style>

请教一下，闭包在 react 中不注意就会产生，尤其是传递 方法的时候，有什么解决闭包的方法吗？