Question

我正在使用VueJS。给定一个看起来像这样的标记：

<template v-for="item in some_counter">
  <p v-if="item.some_param1 !== 'None'">
   [[ item.some_param2 ]]
  </p>
</template>

我想显示满足条件的次数。因此，如果条件满足3次，我希望看到<p>这样的标记：

<p>1, some_value1</p>
<p>2, some_value2</p>
<p>3, some_value3</p>

其中1,2,3是满足条件的时间。

如何实现这一目标？

Answer 1

您可以通过查看属性来实现此目的：

在您的Vue实例上：

export default Vue.extend({
  data { occurrences: 0 },
  computed: { myProp: function() { return this.item.some_param1 !== 'None' } },
  watch: {
    myProp: function (val, oldVal) {
      if (val && !oldVal) {
        // myProp has changed from true to false
        this.occurrences++
      }
    }
  }
})

然后，如果您想为每次出现显示<p>，则可以使用v-for来做到这一点：

<p v-for="index in occurrences" :key="index">
  This is the {{ index }}th time the condition has become true.
</p>

Answer 2

我想您应该过滤数据：

new Vue({
  el: '#app',
  data: {
    items: [
      { some_param1: 'foo1', some_param2: 'bar1' },
      { some_param1: 'None', some_param2: 'bar2' },
      { some_param1: 'foo3', some_param2: 'bar3' },
    ],
    filteredItems: []
  },
  mounted () {
    this.filteredItems = this.items.filter(item => item.some_param1 !== 'None')
  }
})

p {
 margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p v-for="(item, index) in filteredItems" :key="index">
   {{ index + 1 }}, {{ item.some_param2 }}
  </p>
</div>

vuejs显示满足v-if条件的次数

2 个答案: