javascript - Comment Vue détermine-t-il si une certaine valeur dans V-For est modifiée?

Question

Collez d'abord le code et vous pourrez voir l'effet en le collant directement {code...} Je souhaite vérifier si le nombre sous la liste a changé ou s'il est supérieur au nombre actuel. Si le nombre change, la durée inférieure à h2 apparaîtra. Puis il disparaît en 1 seconde. Mais je n’ai pas compris comment faire. (Avis: ...

高洛峰 · Answer

Bien, tu devrais utiliser la montre

Il devrait être séparé et utilisé. Je pense que la méthode d'écriture originale de Vue devrait être comme ceci :

Vue.component('list-view', {
  props: ['item'],
  data() {
    return {
      is_show: false
    }
  },
  watch: {
    'item.number': function(newN, oldN) {
      this.is_show = newN > oldN;
    },
    is_show: function(newStatus) {
      if (newStatus) {
        setTimeout(() => this.is_show = false, 1000);
      }
    }
  },
  template: `
      
        
      我出现了
    `
});

const app = new Vue({
  el: '.bg',
  data() {
    return {
      list: [{
        id: 0,
        name: '李四',
        number: 0
      }, {
        id: 1,
        name: '张三',
        number: 0
      }, {
        id: 2,
        name: '王五',
        number: 0
      }, ]
    }
  },
  mounted() {
    //测试用的
    setTimeout(() => {
      this.$set(this.list[0], 'number', 1);
    }, 1000);
    setTimeout(() => {
      this.$set(this.list[1], 'number', 1);
    }, 2000);
    setTimeout(() => {
      this.$set(this.list[2], 'number', 1);
    }, 3000);
  }
});

Vous pouvez aller sur https://jsfiddle.net/1rb586dr/2/ pour en faire l'expérience

曾经蜡笔没有小新 · Answer

Vous pouvez utiliser watch()propriétés

documentation API : vue-vatch

J'espère que cela pourra vous aider, si vous ne comprenez pas encore@我