javascript - How does vue determine whether a certain value in v-for is changed?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

过去多啦不再A梦 2017-06-30 09:58:49

869

Paste the code first, then paste it directly to see the effect

       
   
 
  {{ item.name }}
 我出现了

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 think about how to do it. (Note: Which span appears when the number changes. Not all appear.)

过去多啦不再A梦

reply all (2)

小葫芦2017-06-30 10:00:49 2 floor

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