Question

我正在学习Vue.js，目前我正在学习与css互动，我真的很想知道为什么我的代码不起作用，基本上我有一个按钮，当我点击那个按钮时，每1秒（我使用setInterval，我测试了setInterval，它工作）它应该在我已经在我的CSS上定义的2个类之间改变，我有一个higlight类和一个收缩类，它应该相互交换在1秒内，当我进入示例时，第二个类被附加但是通过1秒没有发生变化，你们可以解释一下为什么吗？

Html相关部分

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <script src="https://unpkg.com/vue@2.2.1"></script>

  <div id="exercise">
    <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
    <div>
      <button @click="startEffect">Start Effect</button>
      <div id="effect" :class="{highlight: effect,shrink: !effect}"></div>
    </div>

的CSS

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

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

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

的Javascript

  new Vue({
  el: '#exercise',
  data: {
    effect: true,
  },
  methods: {
    startEffect: function() {
      setInterval(function(){
        this.effect = !this.effect;
        console.log(this.effect);
      },1000);
    }
  }
});

Answer 1

您在component内丢失了setInterval的内容，因此this不是您所期望的vue-component。

new Vue({
    el: '#exercise',
    data: {
      effect: true,
    },
    methods: {
      startEffect: function() {
        console.log(this) // add this line
        setInterval(function() {
          this.effect = !this.effect;
          console.log(this) // with this line, it will show you what went wrong
          console.log(this.effect);
        },1000);
      }
    }
})

您可以这样做：

new Vue({
  el: '#exercise',
  data: {
    effect: true,
  },
  methods: {
    startEffect: function() {
      setInterval(() => {
        this.effect = !this.effect;
        console.log(this.effect);
      },1000);
    }
  }
})

这是有效的，因为arrow functions this绑定到封闭范围。

或（ES5）

new Vue({
  el: '#exercise',
  data: {
    effect: true,
  },
  methods: {
    startEffect: function() {
      var vm = this
      setInterval(function() {
        vm.effect = !vm.effect;
        console.log(this.effect);
      },1000);
    }
  }
})

这可行，因为您不再在this回调中使用setInterval's，而是使用保存组件上下文的变量vm。

看到它正常工作

＆＃13;

new Vue({
  el: '#exercise',
  data: {
    effect: true,
  },
  methods: {
    startEffect: function() {
      setInterval(() => {
        this.effect = !this.effect;
        console.log(this.effect);
      },1000);
    }
  }
})

＆＃13;

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="exercise">
    <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
    <div>
      <button @click="startEffect">Start Effect</button>
      <div id="effect" :class="{highlight: effect,shrink: !effect}">     </div>
</div>

＆＃13;

改变班级动态并不能正常工作

1 个答案: