延迟改变样式

Question

我想在单击按钮后稍微延迟地切换 div 的样式。

如果我只是使用没有超时的东西，那么代码将正常工作this.customEffect = 'blueborder';。

new Vue({
  el: '#app',
  data: {
    customEffect: ''
  },
  methods: {
    start: function() {
      setTimeout(function() {
        this.customEffect = 'blueborder';
      }, 1000);
      setTimeout(function() {
        this.customEffect = 'redtext';
      }, 2000);
    }
  }
});

.blueborder {
  border: 3px solid blue;
}

.redtext {
  color: red;
}

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <button @click="start">Start</button>
    <div :class="customEffect">Some text</div>
  </div>
 </div>

Answer 1

我认为您遇到的问题是this超时的上下文是匿名函数的，而不是父对象的。您可以使用箭头函数或显式绑定。

new Vue({
  el: '#app',
  data: {
    customEffect: ''
  },
  methods: {
    start: function() {
      setTimeout((function() { //BIND
        this.customEffect = 'blueborder';
      }).bind(this), 1000);
      setTimeout(() => { //OR =>
        this.customEffect = 'redtext';
      }, 2000);
    }
  }
});

.blueborder {
  border: 3px solid blue;
}

.redtext {
  color: red;
}

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <button @click="start">Start</button>
    <div :class="customEffect">Some text</div>
  </div>
 </div>

编辑推荐的学习资源

this在 JS 中可能会变得非常棘手。如果您想了解更多信息，我强烈推荐Getify This & Object Prototypes的相关《你不知道 JS》一书