Vue js 스타일 적용
일반적으로 .css파일을 작성해서 style을 적용시키는 방법말고도 Vue에서는 여러가지 방법으로 적용이 가능해요. 오늘은 Vue에서 style을 적용시키는 방법을 알아보도록 할게요.
Vue 인스턴스 data로 style을 처리하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="styletest">
<button id="a" v-bind:style="mybtn" @mouseover.stop="over" @mouseout.stop="out">test</button>
</div>
<script>
var vm = new Vue({
el: "#styletest",
data : {
mybtn : {
backgroundColor: 'red',
border: 'solid 1px gray',
width: '150px',
textAlign: 'center',
}
},
methods: {
over: function(e){
this.mybtn.backgroundColor="blue";
this.mybtn.color="white";
},
out: function(e){
this.mybtn.backgroundColor="grey";
this.mybtn.color="black";
}
}
})
</script>
</body>
</html>
Vue 인스턴스의 data 부분에 스타일과 관련된 속성을 추가하고 v-bind:style="속성명"
으로 style
을 bind
해주면 되요. 다만 주의 해야할 점은 스타일이 기존에 알고있는 표기법이랑 달라요... 그래서 아마 이건 자주 안쓰일 것 같아요.
Vue 인스턴스 data로 여러개의 style을 처리하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="styletest">
<button id="a" v-bind:style="[mybtn, mybtn2]">test</button>
</div>
<script>
var vm = new Vue({
el: "#styletest",
data : {
mybtn : {
backgroundColor: 'red',
border: 'solid 1px gray',
width: '150px',
textAlign: 'center',
},
mybtn2 : {
height: '50px'
}
}
})
</script>
</body>
</html>
여러 개의 스타일을 추가할 땐 위와 마찬가지의 방법을 사용한되 속성명을 []
로 묶어 주시면 되요.
Vue 인스턴스 data로 style 속성을 개별적으로 적용하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="styletest">
<button id="a" v-bind:style="{ backgroundColor: mybtn.bc, border: mybtn.bd }">test</button>
</div>
<script>
var vm = new Vue({
el: "#styletest",
data : {
mybtn : {
bc: 'red',
bd: 'solid 1px gray'
}
}
})
</script>
</body>
</html>
속성명대신에 {}를 연 다음 부여하고 싶은 style
속성명을 적으시고 생성한 Vue 인스턴스 data 속성을 추가하면 되요.
가끔씩 필요할 것 같긴한데 특정 클래스를 반복해서 사용하는 경우 한 부분의 css 아주 조금 수정하기 위해서 사용할 것 같아요. class 하나 더 만드는 것 보다는 효율적이라고 생각이 들긴하지만 이런식으로 할 경우 유지보수가 힘들어지니 안하는 게 좋을 수도 있겠네요.
Vue 인스턴스 data를 이용한 class 바인딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<style>
.set1 { background-color: red; }
.set2 { background-color: green; }
.set3 { background-color: blue; }
</style>
</head>
<body>
<div id="styletest">
<button id="a" v-bind:class="classbinding">test</button>
<p>
<input type="checkbox" v-model="classbinding.set1" value="true"/>1
<input type="checkbox" v-model="classbinding.set2" value="true"/>2
<input type="checkbox" v-model="classbinding.set3" value="true"/>3
</p>
</div>
<script>
var vm = new Vue({
el: "#styletest",
data : {
classbinding : {
set1: false, set2: false, set3: false
}
}
})
</script>
</body>
</html>
기본적으로는 v-bind:style
과 동일해요. 다만 class
는 checkbox
를 이용해서(다른 것도 가능) 동적으로 style을 변경할 수가 있어요. 여기서는 각 checkbox가 classbinding
이라는 속성의 boolean
값들과 데이터바인딩이 되어 있는데요. 즉 set1
이 true
값을 가져야만 set1
클래스를 바인딩을 하게되는거죠. set2, set3
마찬가지고요. 여기서 주의해야할 점은 classbinding
속성 안에 set1, set2, set3
의 순서에요. 왜냐하면 set1
이 적용되있는상태에서 set2나 set3
가 적용이 될 수 있어요. 하지만 set3
가 적용된 상태에서는 set1
이나 set2
는 적용될수가 없어요. 쉽게 생각하면 class="set1 set2 set3
"로 세팅되어있고 여기서 스위치처럼 true/false로 값을 변경하는거라고 생각하시면되요. 그럼 set3
가 우선순위가 높다고해야하나요? 같은 스타일속성일 경우에는 set3
가 우선적으로 적용되죠. 위 예제를 따라하시고 3번이 체크된상태에서 1번, 2번을 체크해보시면 아실거에요.
보통 class를 이용하여 개발을 많이 하게될텐데 이 점 주의하시길 바랄게요.
Vue 인스턴스 Computed, Methods를 이용한 class 바인딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<style>
.cant {background-color: red}
</style>
</head>
<body>
<div id="styletest">
<p>You can write 1~10 number</p>
<div>
point : <input type="text" v-model.number="num" v-bind:class="info">
</div>
</div>
<script>
var vm = new Vue({
el: "#styletest",
data : {
num : 0
},
computed : {
info: function(){
if(this.num >=1 && this.num <=10)
return { cant: false };
else
return { cant: true };
}
}
})
</script>
</body>
</html>
computed, methods를 이용해서도 당연히 class binding을 할 수 있어요. 위의 예제들과 거의 비슷한데 computed의 리턴값을 주목할 필요가 있어요. return { cant: false };
처럼 단일 boolean값이 아니라 클래스명 : boolean 값으로 리턴을 해줘야 해요.
'Front_End > Vue.js' 카테고리의 다른 글
05. Vue.js Dynamic CSS 적용하기 (0) | 2018.12.14 |
---|---|
03. Vue.js 초간단 Event Handling (1) | 2017.12.25 |
02. Vue.js Vue 인스턴스 옵션 and Life Cycle (0) | 2017.12.24 |
01. Vue.js 기본기: 각종 디렉티브 (0) | 2017.12.23 |
00. Vue.js 설치와 시작 (2) | 2017.12.22 |