Vue：用setInterval中变量的值改变class

Question

我正在学习 Vue JS。我想使用 setInterval 更改 class。但是不能将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>

Vue：用setInterval中变量的值改变class

Vue: Change class with the value of a variable in setInterval

vue.js

vuejs2

computed-properties