728x90
반응형
어제에 이어 computed를 이용한 추가 예제 하나만 더 보겠습니다!!
◎ 적,녹,청색의 슬라이더(range)를 움직이면 완성된 색을 표시하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제</h2>
<div id="app">
<p v-bind:style="{backgroundColor:mixColor}">{{ mixColor }}</p>
<label>R : <input type="range" v-model="R" min="0" max="255"><br></label>
<label>G : <input type="range" v-model="G" min="0" max="255"><br></label>
<label>B : <input type="range" v-model="B" min="0" max="255"><br></label>
</div>
<script>
new Vue({
el: '#app',
data: {
R: 255,
G: 150,
B: 100
},
computed:{
mixColor: function(){
var ans = "RGB(" + this.R + "," + this.G + "," + this.B + ")";
return ans;
}
}
})
</script>
</body>
</html>Range와 min, max 값을 이용해서 범위를 지정하고 슬라이더를 움직이면 값이 변경되면서 색이 변합니다.
다른 예제들과 다른 점은 기존의 RGB 값을 이용했다는 것입니다.
추가적으로 슬라이더바 옆에 입력 창을 넣어 직접 수치 입력가능하게 하고 새로운 슬라이더 바를 넣어서 글자색을 조절 가능하게 생성해보겠습니다!
◎ 추가 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제</h2>
<div id="app">
<p v-bind:style="{backgroundColor:mixColor, color:mixColor2}">{{ mixColor }}</p>
<label>R : <input type="range" v-model.number="R" min="0" max="255">
<input v-model.number="R"><br></label>
<label>G : <input type="range" v-model.number="G" min="0" max="255">
<input v-model.number="G"><br></label>
<label>B : <input type="range" v-model.number="B" min="0" max="255">
<input v-model.number="B"><br></label>
<p v-bind:style="{color:mixColor2}">color</p>
<label>RED : <input type="range" v-model.number="txtR" min="0" max="255"><br></label>
<label>GREEN : <input type="range" v-model.number="txtG" min="0" max="255"><br></label>
<label>BLUE : <input type="range" v-model.number="txtB" min="0" max="255"><br></label>
</div>
<script>
new Vue({
el: '#app',
data: {
R: 255,
G: 150,
B: 100,
txtR: 0,
txtG: 0,
txtB: 0
},
computed:{
mixColor: function(){
var ans = "RGB(" + this.R + "," + this.G + "," + this.B + ")";
return ans;
},
mixColor2: function(){
var ans1 = "RGB(" + this.txtR + "," + this.txtG + "," + this.txtB + ")";
return ans1;
},
}
})
</script>
</body>
</html>위의 예제에서 슬라이더바와 변수 3개 함수(mixColor2)를 하나 더 추가해 본문(p)에 추가하니 작성했던 두 글자 모두 아래 슬라이드의 색상이 적용되었습니다.
두 가지 스타일을 동시에 지정할 때는 "{ 스타일1 : 프로퍼티1, 스타일2 : 프로퍼티2}"와 같은 방법으로 지정합니다.
v-bind:style="{backgroundColor:mixColor, color:mixColor2}"
또한, "RGB(" + this.txtR + "," + this.txtG + "," + this.txtB + ")" 다음과 같은 방식으로 문자를 받아 mixColor2로 들어가면서 색이 변경됩니다.
만약 computed 대신 methods를 사용한다면 methods를 따로 호출하는 버튼이 있어야 출력이 됩니다.
computed처럼 바로 적용이 되지는 않습니다.
제가 추가로 생각하고 변경한 예제는 아래를 참고해주세요!!
(해당 글자색만 변경)
// html
<label v-bind:style="{color:txtRed}">RED : <input type="range"
v-model.number="txtR" min="0" max="255"><br></label>
<label v-bind:style="{color:txtGreen}">GREEN : <input type="range"
v-model.number="txtG" min="0" max="255"><br></label>
<label v-bind:style="{color:txtBlue}">BLUE : <input type="range"
v-model.number="txtB" min="0" max="255"><br></label>
// script
txtRed: function(){
return "RGB(" + this.txtR + "," + 0 + "," + 0 + ")";
},
txtGreen: function(){
return "RGB(" + 0 + "," + this.txtG + "," + 0 + ")";
},
txtBlue: function(){
return "RGB(" + 0 + "," + 0 + "," + this.txtB + ")";
}위의 코드와 같이 변경 또는 추가로 입력하면 스크롤 변경시 해당 색으로 변경됩니다.
이렇게 computed를 사용해서 값에 바로 적용되게끔 실습을 해보았는데 여러 예제를 풀면서 앞에서 했던 예제들의 복습까지 되는 것 같아요!!
역시 복습을 자주해야겠어요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) (0) | 2022.12.27 |
|---|---|
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) (2) | 2022.12.27 |
| [java script] Vue.js 데이터를 사용한 계산(computed) (0) | 2022.12.26 |
| [java script] Vue.js의 구글 차트란? (0) | 2022.12.26 |
| [java script] Vue.js 조건(v-if)과 반복(v-for) 3 (0) | 2022.12.26 |
