javascript - How does vue determine whether a certain value in v-for is changed?

Question

Paste the code first, and you can see the effect by pasting it directly {code...} I want to monitor whether the number under the list has changed, or is greater than the current number. If the number changes, the span below h2 will appear. Then it disappears in 1 second. But I didn’t figure out how to do it. (Notice: ...

高洛峰 · Answer

Good, you should use watch

It should be separated and used. I think the original Vue writing method should be like this:

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

You can go to https://jsfiddle.net/1rb586dr/2/ to experience it

曾经蜡笔没有小新 · Answer

You can use the watch()attribute

api documentation: vue-vatch

I hope I can help you, if you still don’t understand, just @me