해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면
Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기
Vue는 Html 클래스를 동적으로 토클하는 기능을 제공합니다.
<div id="app">
<span :class="{active: isActive}"> 안녕하세요</span> <br/>
<button @click="createClass"> 클래스 생성 </button>
</div>
.active {
color: red;
}
new Vue({
el: '#app',
data: {
isActive:false,
},
methods:{
createClass(){
this.isActive=!this.isActive;
}
}
})
참고:https://jsfiddle.net/qudcks0703/y1zef7or/127/
위의 코드는 버튼 클릭시마다 active라는 class를 토글 하는 코드입니다.
이와 같이 동적인 클래스를 적용시킬 수 있습니다.
클래스 2개 이상 적용방법 (인라인)
<span :class="{active: isActive,active2: isActive2}"> 안녕하세요</span> <br/>
클래스 2개 이상 적용방법 (인라인 X)
<span :class="classObject"> 안녕하세요</span> <br/>
new Vue({
el: '#app',
data: {
classObject:{
active: true,
active2:false
},
})
이뿐만 아니라 계산된 속성을 적용하여 실행 할 수도 있습니다.
<span :style="styleObject"> 안녕하세요</span> <br/>
new Vue({
el: '#app',
data: {
styleObject:{
color: red,
text-align:center,
}
}
})
스타일도 마찬가지로 HTML과 같은 방식으로 바인딩 할 수 있습니다.
[Vue.js] 8. 조건부 렌더링(V-if,v-show),리스트 렌더링(v-for)에 대한 심화 이해 및 예제 (0) | 2020.07.17 |
---|---|
[Vue.js] 6. computed 와 watch에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 5. 템플릿 문법 그리고 v-속성에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 4. Vue 인스턴스 라이프사이클(생명주기) (0) | 2020.07.15 |
[Vue.js] 3. Vue 인스턴스의 속성과 메소드 그리고 기초 (0) | 2020.07.15 |
댓글 영역