Vuejs在99+上取代大数字

Question

我有一个代码：

<span class="pl-2 text-def" v-show="notificationsCount">@{{notificationsCount}}</span>

如果notificationsCount的号码是1000+，则需要替换99+。我该怎么办？

Answer 1

您可以定义自己的filter：

Vue.filter('bigNumber', function (value) {
  if (!value) { 
    return 0;
  }
  return value > 1000 ? '99+' : value;
});

new Vue({
  el: '#example',
  data: {
    num1: 1001,
    num2: 999,
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example">
  <div>num1: {{ num1|bigNumber }}</div>
  <div>num2: {{ num2|bigNumber }}</div>
</div>

Answer 2

只需替换

{{notifications}}

作者

{{notifications < 1000 ? notifications : '99+'}}