vue.js - Vue：使用setInterval中的变量值更改类

Question

我正在学习 Vue JS。我想使用setInterval. 但不能传递Methodto的变化值Computed Property。两秒后类会随着“ 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
          }
        }
    }
})

标签： vue.jsvuejs2computed-properties

Answer 1

将您的功能绑定到组件...

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

然后你可以做...

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