Vue :: 클릭할 때마다 div 색상 변경(css) methods, computed 이용

1. 클릭할 때마다 상자 값 변경하기 ( False -> True ->  False  ....) 

#  html <section id="styling">       <div class="demo" @click="clickBox"></div>       <div class="demo"></div>       <div class="demo"></div>     </section>   # js  const app = Vue.createApp({     data(){         return{             box1: false,             box2: false,             box3: false,         }     },     methods:{         clickBox(){             console.log(this.box1);             this.box1 = !this.box1;             console.log(this.box1);             console.log('클릭할 때마다 바뀜');         }, }} ) app.mount('#styling')

 

- 세개의 div 상자가 있는데, 첫번째 상자에 @Click 으로 clickBox() methods를 연결

- box1 의 초기 data 는 false 

--> clickBox() { 

           this.box1 = !this.box1                        # false가 아닌 것은 true이기에 true로 바뀜

}

 

 

 

2. True 로 선택될 때 Css 값 주기

# html      <div       class="demo"       :class="{active : box1}"        @click="clickBox">             </div>    # js     methods:{         clickBox(){             this.box1 = !this.box1;           },

 

CSS 변경 방법 1. 클래스 추가  : true 값일 때 class 를 추가해 주는 것

 

기존 class는 그대로 두고  추가할 class를 'active'로 만든 후

:class = "{ active : true(box1) }" 이렇게 되게끔 만들어 주는 것이다.

:class = "{ active : false (box1) }" 이면 active 클래스가 비활성화되고  :class = "{ active : true }"가 되면 active 클래스가 활성화 되며 css 변경을 가능하게 할 수 있다.

 

click 매소드 실행될 때마다 box1 데이터 값을 true, false로 왔다갔다 할 수 있다는 점을 이용한 것

 

 

 

 

3. 표현 방식 3가지 

# 고정 클래스와 변동 클래스 따로      <div       class="demo"       :class="{active : box1}"        @click="clickBox">             </div>

# 고정, 변동클래스 리스트로 묶기         <div       :class="[ 'demo',                      {active : box1} ]"       @click="clickBox">       </div>

# style에 직접적으로 변경 주기 - 삼항연산자       <div class="demo"       :style=           "{borderColor: box1 ? 'purple' : '#ccc',            backgroundColor: box1 ? 'salmon' : 'white'}"             @click="clickBox"       >       </div>

 

아직 배우는 입장이라 어떤 것이 더 잘 사용되는지 모르겠다.. 일단 배우는중...

 

3번째 방식은 삼항연산자를 이용하는 것이다

==> 조건 ? 값1 : 값2

조건이 참이면 값1, 거짓이면 값2를 반환한다.

 

 

 

 

 

4. 박스 3개 중 선택되는 박스에 적용하기  (if, 인자(파라미터) 사용)

 

boxSelected() 메소드에 입력되는 파라미터 value를 줘서, value 에 따라 선택되는 div를 다르게 지정함.

# html     <div class="demo" :class="{active: box1}" @click="boxClicked('A')"></div>     <div class="demo" :class="{active: box2}" @click=" boxClicked('B')"></div>     <div class="demo" :class="{active: box3}" @click=" boxClicked('C')"></div>

# js  methods: {     boxClicked(value) {       if (value ==='A') {         this.box1 = !this.box1;       } else if (value === 'B') {         this.box2 = !this.box2;       } else if (value === 'C') {         this.box3 = !this.box3;       }     },   },

 

 

● 강의플랫폼: Udemy
● 강의명 : Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
● 강사명: Maximilian Schwarzmüller (AWS certified, Professional Web Developer and Instructor)

 해당 포스팅은 위의 강의를 수강하고 난 후 공부하기 위해 공부하며 작성한 포스팅입니다. 
강의 내용을 캡쳐하거나 소스를 그대로, 혹은 가공 재배포하지 않습니다.

공부하기 위해 작성한 내용으로 혹시 수정할 내용이 있다면 알려주시면 감사하겠습니다!