CODEWITHSUNDEEP
vue.js
Dumitru
Dumitru

Reputation: 2173

Vuejs replace big number on 99+

I have a code: 

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

If notificationsCount number is 1000+ I need replace on 99+. How I can do it ?

Upvotes: 0

Views: 338

Answers (2)

Beniamin H
Beniamin H

Reputation: 2086

You can define your own 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>

Upvotes: 1

Daniel
Daniel

Reputation: 8647

Simply replacing

{{notifications}}

by

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

Upvotes: 0

Related Questions