728x90
반응형
CSS 클래스를 저장해놓고 이를 불러와서 바인드하는 방법들이 다양하게 존재한다
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<style>
.css1{
background-color : yellow;
}
.css2{
color : red;
}
.css3{
background-color : red;
}
.css4{
color : yellow;
}
</style>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data :{
css1Name : 'css1',
css2Name : 'css2',
isCss1 : false,
isCss2 : false
},
methods : {
setCss1 : function(){
this.css1Name = 'css3',
this.css2Name = 'css4'
},
setCss2 : function(){
this.isCss1 = true,
this.isCss2 = true
},
removeCss2 : function(){
this.isCss1 = false,
this.isCss2 = false
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3 class = 'css1 css2'>문자열</h3>
<h3 v-bind:class='css1Name'>문자열</h3>
<h3 v-bind:class='[css1Name,css2Name]'>문자열</h3>
<button type='button' v-on:click='setCss1'>css1 변경</button>
<h3 v-bind:class='{css1:isCss1, css2:isCss2}'>문자열</h3>
<button type='button' v-on:click='setCss2'>css true 설정</button>
<button type='button' v-on:click='removeCss2'>css false 설정</button>
<h3 v-bind:class='[isCss1 ? css1Name : "", isCss2 ? css2Name : ""]'>문자열</h3> <!--2개 이상일 때는 쉼표로 구분, false면 "" true면 css1name으로 적용-->
</div>
</body>
</html>1. 쌩짜로 class = 꼴로 불러오기. 여러개 불러올 때는 띄어쓰기로 구분하기
2. data에 안에 css 클래스를 불러올 변수를 지정하고 그 변수로 v-bind:class
여러개 불러올 때는 [css1Name,css2Name]꼴로 대괄호에서 쉼표로 구분하여 가져오자.
3. 메소드 안에 function으로 저장하여 특정 css name 을 지정하거나, 속성을 지정/해제할 수 있다.
v-on:click 등을 통해 동적으로 이벤트를 먹일 수 있다.
+ 정규표현식으로도 지정할 수 있다!
css1을 css3으로, css2를 css4로 변경하는 이벤트
css 3,4로 변경된 후
css true/false 설정을 통해 온오프도 가능하다
728x90
반응형
'study > Vue.js' 카테고리의 다른 글
| (미해결) 인텔리제이에서 jsp 파일 실행이 안돼요 / jsp 깨짐 / unable to ping server at localhost:1099 / jsp 500 에러 (0) | 2022.06.26 |
|---|---|
| Vue.js 인라인 바인딩 inline binding (0) | 2022.06.11 |
| Vue.js 링크 처리: v-bind / v-on 용도 추가 (0) | 2022.06.09 |
| Vue.js computed에서 get / set : 변수 받아서 셋팅하기 (0) | 2022.06.08 |
| Vue.js watch computed : 캐시 메모리저장 여부 / 코드 복잡도 차이 (0) | 2022.06.07 |
댓글