Vue.js 클릭한 버튼의 색상을 변경합니다.

환경

jsfiddle
ゔ에 @ 2.6.14

클릭 한 버튼의 색상을 변경하십시오!

완성된 코드

버튼을 클릭하면 버튼의 색상이 변경됩니다.

클릭 전


클릭 후

상세

css

.buttoncolor {
    background-color: green;
}

변경 후 버튼의 색상을 지정합니다.

html

<div id='app'>
    <button v-bind:class="{ buttoncolor: buttonState }" v-on:click="changeState">
         色を変えるためのボタン
    </button>
    {{buttonState}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

① v-bind:class에서는 v-bind:class="{class名: バインド先(真偽値を持つ)}" 로 하는 것으로, 진위치를 가지는 buttonState 변수와 buttoncolor 클래스를 대응시키고 있다.
즉 buttonState가 true일 때, buttoncolor 클래스가 적용되지만, false일 때는 적용되지 않게 됨으로써 버튼의 색이 변화한다.

② v-on : click는 클릭했을 때 작성한 changeState 메소드가 실행되어 buttonState의 진위치가 변경된다.
진위값이 변경됨으로써 ①이 실행된다. (changeState 메서드에 대한 자세한 내용은 sctipt 세부 정보에서 설명합니다.)

script

var app = new Vue ({
    el:'#app',
    data:{
        buttonState: false  
    },
    methods:{
     changeState: function(){
         this.buttonState = !this.buttonState
     }
    }
})

① data내에, 진위치를 가지는 buttonState 변수를 지정하고 있다.
②methods에서는, 불려 갔을 때에, 진위치를 변경하는 changeState 메소드를 작성하고 있다.

동작

① 버튼이 클릭된다
② v-on:click로 지정된 changeState 메소드가 실행된다.
③②에서 buttonState의 진위가 변경된다.
④③에서 진위값이 변경된 것, v-bind로 바인드된 클래스가 true일 때에만 적용된다.

요약

간단한 코드입니다만, 막상 구현하면 익숙해지기까지는 시간이 걸려 버렸습니다.
나와 같은 초보자의 참고가되면 기쁩니다!