使用 Vue 过滤器根据数据的数量对数据进行复数

Vue 是一个用于构建用户界面的渐进式框架。核心库仅专注于视图层，易于获取并与其他库集成。 Vue 还可以完美地结合现代工具和支持库来支持复杂的单页应用程序。

过滤器是 Vue 组件提供的一项功能，可让您将格式设置和转换应用于模板动态数据的任何部分。组件的过滤器属性是一个对象。单个过滤器是一个接受一个值并返回另一个值的函数。返回的值是实际打印在 Vue.js 模板中的值。

为了根据计数对数据进行复数，我们必须编写过滤逻辑来以单数和复数形式显示数据。我们只需检查给定的计数是否等于 1，并根据结果决定显示单数或复数形式。

例子：

index.html

  
  


  GeeksforGeeks
  
    No. of item:  
      {{ c1 | pluralize('Book','Books') }}
    
  
    No. of item:  
      {{ c2 | pluralize('Chair','Chairs') }}
    
  
    No. of item: 
      {{ c3 | pluralize('Potato Fry','Potato Fries') }}
    
  
    No. of item: 
      {{ c4 | pluralize('Ice Cream','Ice Creams') }}
    
  
    No. of item: 
      {{ c5 | pluralize('Mobile','Mobiles') }}
    
  
  
  

应用程序.js

const parent = new Vue({
  el: "#parent",
  data: {
    c1: 1,
    c2: 5,
    c3: 100,
    c4: 10,
    c5: -9,
  },
  
  filters: {
    pluralize: function (count, sing, plur) {
  
      // Decide to pluralize based
      // on the count
      if (count == 1) {
        return count + ` ${sing}`;
      } else if (count > 1) {
        return count + ` ${plur}`;
      } else {
        return "Please pass valid count of data";
      }
    },
  },
});

输出：