vue.js - 데이터 바인딩
클래스와 스타일 바인딩
- 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일 등을 조작하기 위해서 사용합니다.
- Vue에서는 v-bind 디렉티브를 이용해서 표현합니다.
- 이를 이용해서 태그의 속성값을 동적으로 지정할 수 있습니다.
<div id="app">
<a v-bind:href='url'></a>
<a :href='getUrl()'></a>
</div>
<script>
const app = new Vue({
el: '#app',
data: {url:"http://google.com"},
methods: {
getUrl: function() {
return "http://google.com";
}
}
})
</script>
- v-bind 디렉티브를 사용한 속성값은 일반적인 HTML속성값과 동일한 수준을 가집니다.
- 이는 중복해서 지정할 경우, 특정한 표현이 사용되는 것이 아니라, 가장 마지막에 지정한 속성값을 사용함을 의미합니다.
- 하지만, 속성 값 중 class속성과 style속성에 대해서는 중복해서 지정할 경우, 실제 HTML에서는 합쳐져서 표현됩니다.
클래스 바인딩
- 바인딩 방법에는 객체로 지정하는 방법과 배열로 지정하는 방법이 있습니다.
<!-- active클래스는 isActive라는 값이 true일 경우에만 활성화됩니다. -->
<div v-bind:class="{ active: isActive }"></div>
- 바인딩 객체는 인라인일 필요는 없습니다.
- 또, 바딩인 객체의 지정은 computed속성을 사용하는 것이 일반적입니다.
<div id="app" v-bind:class="classObject"></div>
<script>
const app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
</script>
- 배열로 지정하는 방법은 객체를 지정하는 방법에서 속성값을 제외한 것과 비슷합니다.
- 기본적으로 배열에 있는 값은 전부 적용되기 때문에 조건부 토글을 위해서는 삼항연산자 또는 배열 안 객체를 사용해야 합니다.
스타일 바인딩
- 클래스와 마찬가지로 객체와 배열을 이용해서 지정할 수 있습니다.
- 특이하게 브라우저 벤더 접두어가 필요한 css속성(transform과 같은)을 사용하면 Vue에서 자동으로 해당 접두어를 적용하여 스타일을 적용합니다.
- 스타일을 지정할 수 있지만, 가능하면 스타일을 속성을 지정하는 것은 피해야합니다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고