728x90
반응형
vueex3.html
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220602/vueex3.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>CSS와 연결하기</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
<style type="text/css">
.set1 {background-color : aqua; color:purple; }
.set2 {text-align : center; width:120px; }
.set3 {border : sandybrown dashed 1px; }
</style>
</head>
<body>
<div id=simple>
<button id="btn1" v-bind:class="{set1:s1, set2:s2, set3:s3}">버튼1</button>
<p>
<input type="checkbox" v-model="s1" value="true">set1 디자인 <br>
<input type="checkbox" v-model="s2" value="true">set2 디자인 <br>
<input type="checkbox" v-model="s3" value="true">set3 디자인 <br>
</p>
</div>
<script type="text/javascript">
let model = {
s1 : false,
s2 : false,
s3 : false
}
let simple = new Vue ({
el : "#simple",
data : model
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. Todo List (vueex5.html ) (0) | 2022.06.02 |
|---|---|
| [Vue] 28. 1부터 100까지 입력하기 (vueex4.html ) (0) | 2022.06.02 |
| [Vue] 28. style 설정하기 (vueex2.html ) (0) | 2022.06.02 |
| [Vue] 28. 마우스 이벤트 (vueex1.html) (0) | 2022.06.02 |
| [Vue] 28. 외부데이터 처리하기2 (vueex5.html ) (0) | 2022.05.31 |