Vue.js 如何在vue组件中添加if in样式标记

我正在尝试访问

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>

从“@/components/partials/Navbar.vue”导入导航栏
从“vuex”导入{mapGetters}
导出默认值{
组成部分：{
导航栏
},
计算：{
…地图绘制者({
已验证：'auth/authenticated'，
用户：“auth/user”
})
}
}
@导入“../assets/css/landing page.css”；

只需分离到new.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>

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

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

---

您不能在标记上使用v-if指令。@BallonUra好的，我怎样才能仅在用户未经身份验证时导入css？请尝试查看此处：检查此项：我建议您将css文件放入仅在用户身份验证时显示的新组件中