728x90
반응형
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220602/vueex2.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>style 설정하기</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple1">
<!--
@mouseover : 마우스 커서가 영역내에 존재.
@mouseout : 마우스 커서가 영역밖으로 나가는 경우.
.stop: stopPropagation() 기능의 별명. 이벤트 전파 방지. 상위태그로 이벤트 전달 방지.
-->
<button id="a" v-bind:style="style1" @mouseover.stop="overEvent" @mouseout.stop="outEvent">테스트1</button>
</div>
<hr>
<!-- simple2 영역의 바탕색을 노랑, border를 1px solid gray로 가로크기를 200, 높이를 100으로 설정하기 -->
<div id="simple2">
<button id="a" v-bind:style="{backgroundColor:a.bc, border:a.bd, width:a.w+'px', height:a.h+'px'}">테스트2</button>
</div>
<div id="simple3" v-bind:style="style3">테스트3</div>
<script type="text/javascript">
let model = {
style1 : { backgroundColor : "aqua", border : "solid 1px gray", width : '100px', textAlign : 'center' }
}
let simple1 = new Vue ({
el : "#simple1",
data : model,
methods : {
overEvent : function() {
this.style1.backgroundColor = 'purple'
this.style1.color = 'yellow'
},
outEvent : function() {
this.style1.backgroundColor = 'aqua'
this.style1.color = 'black'
}
}
})
let simple2 = new Vue ({
el : "#simple2",
data : {
a : {bc:"yellow", bd:"solid 1px gray", w:200, h:100}
}
})
let simple3 = new Vue ({
el : "#simple3",
data : {
style3 : {backgroundColor:"yellow", border:"solid 1px gray", width:'200px', height:'100px', textAlign : 'center'}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 1부터 100까지 입력하기 (vueex4.html ) (0) | 2022.06.02 |
|---|---|
| [Vue] 28. CSS와 연결하기 (vueex3.html ) (0) | 2022.06.02 |
| [Vue] 28. 마우스 이벤트 (vueex1.html) (0) | 2022.06.02 |
| [Vue] 28. 외부데이터 처리하기2 (vueex5.html ) (0) | 2022.05.31 |
| [Vue] 28. 외부데이터 처리하기 (vueex4.html ) (0) | 2022.05.31 |