Vue.js - style 바인딩 설명
오늘은 vue.js의 CSS 스타일 바인딩에 대해 설명 해보도록 하겠습니다. Vue.js의 데이터 바인딩은 Class 목록 및 CSS 인라인 스타일을 조작하기 위해서 사용합니다. 인라인 CSS 스타일이 소스코드 전역에 걸쳐서 산재되어 있다고 가정하면 유지보수하기 정말 까다롭겠지요?
반면에 Vue.js의 데이터 바인딩의 향상된 기능을 사용 할 경우에 좋은 퍼포먼스를 기대할 수 있습니다.
아래에서 간단하게 설명해보도록 하겠습니다.
Vue.js 관련 포스팅 : Vue 참고
Vue.js 관련 포스팅 : Vue 참고
Vue.js - 세부 설명
|
기본적인 v-bind:style 구문입니다. CSS 문이 아닌 Javascript Object 입니다. data 속성의 fontSize와 바인딩 됩니다.
<p v-bind:style="[ baseStyles, overrideStyles ]"></p>
data: {
baseStyles: {
fontWeight: 800,
color: 'red'
},
overrideStyles: {
color: 'blue'
}
}
|
배열도 전달 가능합니다. 최종적으로 예측되는 결과는 fontWeight: 800, color: 'blue' 값이 적용되겠죠?
이해가 잘 안되시면 하단에 실행화면을 참고해주세요.
Vue.js - 전체 소스코드
하단 소스코드는 첨부파일과 동일합니다. 브라우저에서 실행하시면 결과를 확인할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>vue.js</title> </head> <body> <h2>Vue.js - Dynamic Style Binding</h2> <div id="b-style"> <br/> <br/> <h3>인라인 스타일 바인딩</h3> <button v-on:click="fontSize++"> Plus font size </button> <button v-on:click="fontSize--"> Minus font size </button> <p v-bind:style="{ fontSize: fontSize + 'px' }"> Font size is: {{ fontSize }} </p> <br/> <br/> <h3>배열 스타일 바인딩</h3> <p v-bind:style="[baseStyles, overrideStyles]"> baseStyles and overrideStyles </p> </div> <script src="https://unpkg.com/vue"></script> <script> //v-bind : Style var app = new Vue({ el: '#b-style', data: { fontSize: 20, baseStyles: { fontWeight:'800', color: 'red' }, overrideStyles: { color:'blue' } } }) </script> </body> </html> | cs |
Vue.js - 실행 화면
실제 실행 결과입니다. Console 창에서 직접 app 인스턴스에 접근 후 각 CSS 속성 값을 변경해봅니다.
Vue.js - 소스코드 다운로드
vue_basic9_example.zip
마무리
Vue.js 의 향상된 데이터 바인딩을 통한 다양한 표현식 사용에 대해서 알아보았습니다.
다음 포스팅에서는 클래스(Class) 바인딩에 대해서 알아보겠습니다. 감사합니다.
참고문헌
Vue.js 관련 레퍼런스(Reference) : 이동
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - HTML5 WebSocket(웹 소켓) 연동 기본 예제 및 설명 (4) | 2019.03.25 |
|---|---|
| Vue.js - npm & 테스트(Sample) 프로젝트 설치 및 실행 방법 (0) | 2018.04.16 |
| Vue.js - 기초 문법 배우기(9) 강의 및 예제 소스 - 기초 문법 (0) | 2018.03.07 |
| Vue.js - 기초 문법 배우기(8) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.09 |
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}