如何动态加载CSS文件

Question

我们正在为我的应用程序使用Vue.js和Vuetify。作为我的应用程序的一部分，我将基于该API响应在页面加载时进行API调用，整个应用程序将呈现所有组件。作为此API的一部分，我将获得名为cssDirection的属性，它会告诉应该加载哪个Ls或RTL的css文件。

当我在Angular工作时，我们使用了这种方法。

现在我的问题是，有什么替代方法可以在Vue中实现，而不是上述方法吗？我用谷歌搜索没有找到任何解决方案。

谢谢

Answer 1

要动态加载CSS文件，您可以执行以下操作

<template>
  <div>
    <button @click="appendFile">Click me to add css file</button>
  </div>
</template>

<script>
export default {
  methods : {
    appendFile(){
      let file = document.createElement('link');
      file.rel = 'stylesheet';
      file.href = 'myfile.css'
      document.head.appendChild(file)
    }
  }
}
</script>