VUEJS) v-bind:class, v-on:click, v-model 응용

v-bind:class, v-on:click, v-model 응용

js

const vm = new Vue({
  el: '#app',
  data: {
    toggle: false,
    message: ''
   },
  methods: {
    toggleElement () {
      this.toggle = !this.toggle
    }
  }
})

toggle 데이터, message 데이터 정의
toggleElement함수 정의

 

html

<div id="app">
  <div class="box"
       v-bind:class="{ active: toggle }"
       v-on:click="toggleElement">
    {{ message }}
  </div>
  <button v-on:click="toggleElement">Toggle</button>
  <input type="text" v-model="message">
</div>

div태그 내에 box 클래스를 정의
v-bind:class의 active가 true, false일 때 bind(갱신)된다.
div태그 내, 버튼 내의 v-on:click을 통해 toggleElement를 호출한다.
input내의 v-model을 통해 message가 양방향으로 갱신된다.

 

css

.box {
  width: 150px;
  height: 150px;
  background: royalblue;
  cursor: pointer;
  transition: 1s;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box.active {
  width: 400px;
  background: tomato;
}

.box는 box 클래스 모양을 정의
. box.active는 box 클래스 내의 active가 바인딩될 때 모양을 정의  

 

 

실행결과

 

 

 

※ JS문법

 methods: {
    toggleElement: function() { 
    }

= (동일)

 methods: {
    toggleElement () {
    }