使用 Vue 过滤器过滤工作日和周末

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

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

要过滤出一周中的工作日和周末，我们必须编写基于工作日和节假日的过滤逻辑。我们为此使用 switch-case 并根据日期名称进行过滤。

例子：

index.html

  
  


  
    GeeksforGeeks
  
  
    {{day1}} :  
      {{ day1 | weeks }}
    
  
    {{day2}} :  
      {{ day2 | weeks }}
    
  
    {{day3}} : 
      {{ day3 | weeks }}
    
  
    {{day4}} : 
      {{ day4 | weeks }}
    
  
    {{day5}} : 
      {{ day5 | weeks }}
    
  
  
  

应用程序.js

const parent = new Vue({
  el: "#parent",
  data: {
    day1: "Thursday",
    day2: "Tuesday",
    day3: "Sunday",
    day4: "Monday",
    day5: "Saturday",
  },
  
  filters: {
    weeks: function (day) {
      
      // Using switch case to
      // decide between the days
      switch (day) {
        case "Monday":
        case "Tuesday":
        case "Wednesday":
        case "Thursday":
        case "Friday":
          return "It is Weekday, We have to work.";
        case "Saturday":
        case "Sunday":
          return "It is Weekend, We do not have to work.";
      }
    },
  },
});

输出：