vue.js - 以样式传递Vuejs数据(SFA)

Question

我有一个初学者的问题。例如，我有一个具有 bool(boolean) 属性的组件。依托 Prop 的值(value)，我正在设定Less他应该走的道路，但这是行不通的。有谁知道这是怎么做到的吗？如果可能的话？

<template>
  <div class="my-style">Text</div>
</template>

<script>
  export default {
    props: {
      isFirstApp: Boolean,
    },
    data: function() {
       return {
         isFirst: true,
         path: '',
      }
    }
    created: function () {
        if(this.isFirstApp){
          this.path = '/styles/vars1.less';
        }else{
          this.path = '/oldstyles/vars2.less';
        }
    },
 }
</script>

<style lang="less" scoped>
  @import `${path}`;

  .my-style {
    color: @my-variable;
  }
</style>

Answer 1

这有点麻烦，但是您可以通过在元素的style中创建scss样式的变量，然后以实际样式使用它们来设置“真实的” css属性来实现。它的工作方式是样式设置的变量被浏览器忽略，因为它们不是有效的CSS属性，但是scss可以访问所有先前设置的属性，并且这些属性显示为变量。

Code Sandbox

<template>
  <div class="hello">
    <!-- Set the style to include the values from cssVars computed property -->
    <p :style="cssVars">Hello World</p>
    <!-- type in a new color name/#rgb value to dynamically change it -->
    <input v-model="color">
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      color: "red"
    };
  },
  computed: {
    // Return an object containing scss variables
    cssVars() {
      return {
        "--color": this.color
      };
    }
  }
};
</script>

<style scoped>
// Use the variables defined in style to set 'real' css properties
p {
  color: var(--color);
}
</style>