javascript - vue 如何判断v-for里的某个值发送变化
过去多啦不再A梦
过去多啦不再A梦 2017-06-30 09:58:49
[JavaScript讨论组]

先贴代码,直接粘贴过去就能看效果




    
    
    
    


  • {{ item.name }}

    我出现了

我想监听list 下面的number 是否发生变化,或者大于现在的number。
如果number发生变化了, h2下面的span 就会出现。 然后 1秒消失。

但是没想到怎么去做。 (注意: 哪个number变化就哪个span出现。 不是所有都出现。)

过去多啦不再A梦
过去多啦不再A梦

全部回复(2)
高洛峰

不错,应该使用 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: `
      <li>
        <h2 v-text="item.name"></h2>
      <span v-show="is_show">我出现了</span>
    </li>`
});

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);
  }
});
<p>
  <p class="bg">
    <ul>
      <list-view v-for="item in list" :item="item" :key="item.id">
      </list-view>
    </ul>
  </p>
</p>

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

曾经蜡笔没有小新

你可以使用watch()属性

api文档:vue-vatch

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号