Question

我在同一组件Login.vue中同时包含了作用域和非作用域的样式。问题是当我在样式中应用范围属性时，样式不适用。但是当我从样式中删除范围属性时，样式适用，但也适用于App.vue。

我也尝试在App.vue中同时包含范围样式和非范围样式。

这是我在Login.vue中的代码：

<style>
.....
</style>

<style scoped>
    .application.theme--light {
        background: #242348;
    }
</style>

Login.vue的代码：

<template>

  <v-app id="inspire" style="background: #242348; height: 151vh" >

<v-container>
  <v-layout row wrap>
    <v-flex xs12 md6>
      <div id="text">
        <p>Welcome! Admin</p>
        <p id="textline">Let's get you logged in!</p>
      </div>
    </v-flex>

    <v-flex xs12 md6>
      <v-card id="card">
        <v-tabs  id="tabs"  grow>
          <v-tabs-slider color="purple darken-3"></v-tabs-slider>

          <v-tab
            v-for="(item, index) in items"
            @click="currenttab = index"
            :key="item"

          > {{ item }}</v-tab>

        </v-tabs>
        <v-divider></v-divider>

        <v-form ref="form"  lazy-validation browser-autocomplete="off">
          <v-card-text class="box">
            <v-container>
              <v-flex  >
                <v-text-field
                  label="Username"
                  outline
                  v-model="email"
                  required
                  :rules="emailError"
                  value="email"
                ></v-text-field>
              </v-flex>

              <v-flex >
                <v-text-field
                  id="password"
                  label="Password"
                  :type="show ? 'text' : 'password'"
                  :append-icon="show ? 'visibility' : 'visibility_off'"
                  @click:append="show = !show"
                  outline
                  v-model="password"
                  required
                  :rules="passwordError"

                ></v-text-field>
              </v-flex>

              <v-card-actions>
                <v-btn
                  class="button"
                  color="#4A68C0" round dark
                  @click="validate(email, password)"
                >Sign In</v-btn>
              </v-card-actions>

            </v-container>
          </v-card-text>
        </v-form>
        <v-card-text id="cardtxt" class="text-xs-center">Problem Signing In?</v-card-text>

      </v-card>
    </v-flex>
  </v-layout>
</v-container>
  </v-app>
</template>

这是我的App.vue

<template>
<v-app id="inspire">
  <div id="app">

      <div class="clearfix hidden-xs-only" style="width:100%">
        <app-header v-if="toshow"></app-header>

            <div style="float: left;" v-if="toshow">
                <app-nav></app-nav>
            </div>
            <div style="float: left;" v-if="toshow" >

                <router-view />

            </div>

        <div style="clear:both"></div>
        <app-footer v-if="toshow"></app-footer>
        <router-view v-if="!toshow" class="animated slideInLeft" style="animation-duration: 0.3s; animation-timing-function: ease-out;" />
      </div>


  </div>
</v-app>
</template>

我希望背景色仅应用于Login.vue，而不应用于其他任何.vue文件。但是实际上我得到了这一点：当我从样式中删除范围属性时，背景色将同时应用于Login.vue和App.vue

在Vuejs中无法混合使用本地样式和全局样式

0 个答案: