<template>
<h1 :style=" {color : color, fontSize : fontSize} " @click="changeStyle">
Hello !!!
</h1>
</template>
<script>
export default {
data(){
return {
color : 'orange',
fontSize : '24px'
}
},
methods:{
changeStyle(){
this.color = 'royalblue',
this.fontSize = '64px'
}
}
}
</script>
이렇게 줄 수 있다.
근데 참고로,
key의 이름이 html 스타일 속성의 이름과 같다면,
<h1 :style="{color, fontSize}" @click="changeStyle">
Hello !!! {{ isActive }}
</h1>
이렇게도 가능하다.
그걸 넘어서,
<template>
<h1 :style="fontStyle" @click="changeStyle">
Hello !!! {{ isActive }}
</h1>
</template>
<script>
export default {
data() {
return {
fontStyle: {
color: 'orange',
fontSize: '24px'
}
}
},
methods: {
changeStyle() {
this.fontStyle.color = 'royalblue',
this.fontStyle.fontSize = '64px'
}
}
}
</script>
아예 위처럼 객체로 주는 것도 가능하다.
참고로 꼭 이름이 fontStyle일 필요는 없다.
물론 color, fontSize 이런 거는 제대로 맞춰야 하지만.
<template>
<h1 :style="[fontStyle, backgroundStyle]" @click="changeStyle">
Hello !!! {{ isActive }}
</h1>
</template>
<script>
export default {
data() {
return {
fontStyle: {
color: 'orange',
fontSize: '24px'
},
backgroundStyle: {
backgroundColor : 'green'
}
}
},
methods: {
changeStyle() {
this.fontStyle.color = 'royalblue',
this.fontStyle.fontSize = '64px'
}
}
}
</script>
이렇게 여러 개 주고 싶을 때는, 배열로 주면 됨.
그러니까, :style은 기본적으로 객체로 묶어져서 받는 게 기본인 듯
그냥 변수도 {color} 이런 식으로 받는 거 보면.
객체는 당연히 되고.
근데 거기서 여러 객체 넣을려면 배열로써 넣을 수 있도록 지원해 주는 형태인 듯.
<h1 :style="[fontStyles,backgroundColor,{fontStyle}]">{{ msg }}</h1>
data() {
return {
msg: 'Hello!!',
fontStyles: {
color: 'royalblue',
fontSize: '100px'
},
backgroundColor : {
backgroundColor : 'orange'
},
fontStyle:'italic'
}
}
'Vue.js' 카테고리의 다른 글
| 뷰 태그 그룹핑 (0) | 2023.10.05 |
|---|---|
| 뷰 조건문 (0) | 2023.10.05 |
| 클래스 바인딩, 템플릿 내의 조건문. (0) | 2023.10.04 |
| watch 데이터가 변경되는 지 관찰 (0) | 2023.10.04 |
| computed (0) | 2023.10.02 |