如何在vue组件的样式标签中添加if答案

【问题标题】：How to add if in style tag in component of vue如何在vue组件的样式标签中添加if
【发布时间】：2021-03-19 05:10:28
【问题描述】：

我试图从style 标记中的...mapGetters 访问数据，但它返回错误。我只能访问其他 html 标记中的数据。请在下面查看我的代码。

错误

找不到模块：错误：无法解析 'authenticated&lang=css&'

我的代码

<script>
    import Navbar from '@/components/partials/Navbar.vue'
    import { mapGetters } from 'vuex'

    export default {
        components: {
            Navbar
        },

        computed: {
            ...mapGetters({
                authenticated: 'auth/authenticated',
                user: 'auth/user'
            })
        }
    }
</script>
<style v-if="!authenticated">
    @import '../assets/css/landing-page.css';
</style>

【问题讨论】：

你不能在
@BallonUra 好的，如何在用户未通过身份验证时才导入css？
试试看这里：stackoverflow.com/questions/56703038/…
检查这个：stackoverflow.com/questions/47893611/…
我建议你将你的 css 文件放入新组件中，该组件仅在用户认证时显示

标签： vue.js

【解决方案1】：

只是与新的.vue sfc分开，所以css只有在组件渲染时才会加载app.vue：

<template>
  <div id="app">
    <LoggedIn v-if="authenticated" />
    <SignUp v-else />
  </div>
</template>

<script>
import LoggedIn from "@/components/LoggedIn.vue";
import SignUp from "@/components/SignUp.vue";

export default {
  components: {
    LoggedIn,
    SignUp,
  },
  data() {
    return {
      authenticated: true,
    };
  },
};
</script>

然后在你的SignUp.vue:

<template>
  <div>Hello from signup</div>
</template>

<style scoped>
@import "../assets/landing-page.css";
</style>

【讨论】：