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

Z时代
2024-02-06
分类：IT

请教一下这样写为什么浏览器解析不了值 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>

回答：

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

回答：

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

回答：

可以在style里把值传进去

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

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

回答：

<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>