javascript - Wie bestimmt Vue, ob ein bestimmter Wert in V-For geändert wird?

Question

Fügen Sie zuerst den Code ein, und Sie können den Effekt sehen, indem Sie ihn direkt einfügen {Code...} Ich möchte überwachen, ob sich die Zahl unter der Liste geändert hat oder größer als die aktuelle Zahl ist. Wenn sich die Zahl ändert, wird die Spanne unter h2 angezeigt. Dann verschwindet es in 1 Sekunde. Aber ich habe nicht herausgefunden, wie es geht. (Beachten: ...

高洛峰 · Answer

不错，应该使用 watch

应该分拆使用组建，我想原汁原味的Vue写法应该如此：

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);
  }
});

可以到 https://jsfiddle.net/1rb586dr/2/ 体验

曾经蜡笔没有小新 · Answer

你可以使用watch()属性

api文档：vue-vatch

希望可以帮到你，如果还不懂再@我