I는로서 첨가되어야 할 구성 요소에 변수를 전달할 classA와 div. 그러나 Vue는 variable콘텐츠 대신 이름을 추가합니다 .
그래서 소품 패스 color포함 red.
내가 원하는 것 : <div class="red">2</div>
내가 얻는 것 :<div class="color">2</div>
멍청한 질문 인 것 같아서 죄송합니다. 더 나은 방법이있을 수 있습니다.
도와 주셔서 감사합니다.
내 구성 요소는 다음과 같습니다.
<template>
<div class="btn btn-outline-primary cell"
:class="{color}"
:id="id">
{{ number }}
</div>
</template>
<script>
export default {
name: "TileElement",
props: ["id", "number", "color"]
}
</script>
<style scoped>
.green {
color: green;
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.cell {
display: inline-block;
float: left;
margin: 0.1em;
text-align: center;
background-color: lightgray;
width: 2.7em;
height: 2.7em;
}
</style>
상위 구성 요소 :
<template>
<div class="row">
<TileElement
v-for="tile in tiles"
v-bind:key="tile.id"
v-bind:number="tile.number"
v-bind:color="tile.color"
></TileElement>
</div>
</template>
<script>
import TileElement from './TileElement.vue';
export default {
name: "TileRow",
components: {
TileElement
},
data: function () {
return {
tiles: [
{id: 1, number: 1, color: "green"},
{id: 2, number: 2, color: "red"},
{id: 3, number: 3, color: "yellos"}
]
}
}
}
</script>
조건이나 다른 것들없이 클래스를 전달해야하는 경우 하나 및 다른 수의 클래스에 대해 배열을 간단하게 사용할 수 있습니다.
<div :class="[color]"></div>
그러나 그것은 당신 만이 할 수있는 것이 아닙니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다