search

Home  >  Q&A  >  body text

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bg {
            width: 300px;
            height: 400px;
            position: absolute;
            top: 50px;
            left: 100px;
            border: 1px solid #ccc;
        }

        .bg ul li {
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
<p>
<p class="bg">
    <ul>
        <li v-for="item of list" :key="item.id">
            <h2>{{ item.name }}</h2>
            <span v-show="false">我出现了</span>
        </li>
    </ul>
</p>
<script>
const app = new Vue({
    el: '.bg',
    data () {
        return {
            list: [
                {
                    id: 0,
                    name: '李四',
                    number: 0
                },
                {
                    id: 1,
                    name: '张三',
                    number: 0
                },
                {
                    id: 2,
                    name: '王五',
                    number: 0
                },
            ]
        }
    }
})
</script>
</p>
</body>
</html>

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梦过去多啦不再A梦2696 days ago930

reply all(2)I'll reply

  • 高洛峰

    高洛峰2017-06-30 10:00:49

    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: `
      <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>

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

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-30 10:00:49

    You can use the watch()attribute

    api documentation: vue-vatch

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

    reply
    0
  • Cancelreply