Vue: setInterval 변수 값으로 클래스 변경

Vue: setInterval 변수 값으로 클래스 변경

저는 Vue JS를 배우고 있습니다.다음을 사용하여 클래스를 변경하고 싶다.setInterval하지만, 변화하는 가치의 전달은 불가능합니다.Method로.Computed Property. 2초 후 클래스는 변경된 값 "으로 자동으로 변경됩니다.changeColor"

마이코드:

HTML:

<div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="myClass"></div>
</div>

CSS:

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

Vue JS:

new Vue({
    el: '#exercise',
    data: {
        changeColor: false
    },

    methods : {
        startEffect: function() {
            setInterval(function(){
                 this.changeColor = !this.changeColor;
                 //alert(this.changeColor);
            }, 2000);

            //alert(this.changeColor);
        }
    },

    computed: {
        myClass: function() {
            return {
                highlight: this.changeColor,
                shrink: !this.changeColor
          }
        }
    }
})

기능을 컴포넌트에 바인드...

 setInterval(function(){
                 this.changeColor = !this.changeColor;         
            }.bind(this), 2000);

그러면...

<div id="effect" :class="[changeColor?'highlight':'shrink']"></div>

언급URL : https://stackoverflow.com/questions/52688097/vue-change-class-with-the-value-of-a-variable-in-setinterval