Vue：使用setInterval中的变量值更改类

Question

我正在学习 Vue JS。我想使用setInterval 更改课程。但是不能将Method的变化值传递给Computed Property。两秒后，class 将自动更改为“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
          }
        }
    }
})

Answer 1

将你的函数绑定到组件...

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

然后你就可以做...

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