저는 Vue를 처음 사용합니다. 클래스 스타일 바인딩 구문을 사용하여 시작했습니다. CSS에서 정의한 머리글 및 바닥 글 클래스는 구성 요소 태그에서 참조하더라도 표시되지 않습니다. 이유를 알 수없는 것 같습니다.
클래스를 구성 요소에 넣으려고 시도했지만 거기에도 표시되지 않는 것 같습니다. Vue 앱 이니셜 라이저에서 어떻게 든 클래스를 바인딩해야한다는 느낌이 있습니까?
미리 감사드립니다!
앱보기
<template>
<div id="app">
<div class="container">
<section>
<LauchLogo class="header" />
<LauchSymbol class="footer" />
</section>
<section>
<LauchLogo class="header" />
<LauchSymbol class="footer" />
</section>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LauchLogo from "./components/LauchLogo.vue";
import LauchSymbol from "./components/LauchSymbol.vue";
@Component({
components: {
LauchLogo,
LauchSymbol
}
})
export default class App extends Vue {
data() {
return {
logo: 'logo',
symbol: 'symbol'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
body {
height: 100vh;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100vw;
height: 100vh;
scroll-snap-align: center;
}
.footer {
border: 2px green;
}
.header {
border: 2px blue;
}
</style>
LauchSymbol.vue
<template>
<div class="container">
<img class="responsiveLauch alignMiddle bounce" src="../assets/JustLauch.png"/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
//this is where you put your code
// @Prop() private msg!: string;
ScrollNext () {
alert("hello");
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.responsiveLauch {
max-width: 5%;
height: auto;
}
.bounce {
animation: bounce 2s;
/* animation-delay: 1s; */
animation-iteration-count: infinite;
}
@keyframes bounce {
0%,
25%,
50%,
75%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-80px);
}
60% {
transform: translateY(-42px);
}
}
</style>
LauchLogo.vue
<template>
<div class="container">
<img class="responsiveLogo" src="../assets/LauchLogoTrimmed2.png"/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
//this is where you put your code
// @Prop() private msg!: string;
ScrollNext () {
alert("hello");
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.responsiveLogo {
max-width: 55%;
height: auto;
padding-bottom: 300px;
}
</style>
CSS에 테두리 스타일 속성을 추가해야 할 수도 있습니다. 여기에 추가 한 내용은 테두리를 표시 하지 않습니다 .
.footer {
border: 2px green;
}
.header {
border: 2px blue;
}
그러나 이것은 :
.footer {
border: 2px solid green;
}
.header {
border: 2px solid blue;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다