如何使用Vue将一年划分为闰年或非闰年

Vue可以被定义为用于构建用户界面的渐进式框架。它有多个指令，可以根据用户的需求使用。基本的核心库主要专注于构建视图层，并且很容易选择其他库或与其他库集成。

在本文中，我们将使用Vue的过滤器来检查一个字符串是否为闰年。闰年有366天，而非闰年只有365天。我们可以使用逻辑来检查一个年份是否为闰年。如果一个年份可以被400或4整除，则它是闰年；否则，它不是闰年。

if (year % 100 === 0) {
   if (year % 400 === 0) {
      return "Leapyear";
   } else {
      return "Non-Leapyear";
   }
} else {
   if (year % 4 === 0) {
      return "Leapyear";
   } else {
      return "Non-Leapyear";
   }
}

步骤

我们可以按照以下步骤将一个年份归类为闰年或非闰年−

定义一个名为leapyear的函数，接受一个年份参数。
使用取模运算符(%)检查年份是否能被100整除，获取年份除以100的余数。如果余数为0，则意味着年份能被100整除。
如果年份能被100整除，检查它是否能被400整除。如果年份除以400的余数为0，则意味着该年为闰年。在这种情况下返回字符串”闰年”。
如果年份能被100整除但不能被400整除，则它不是闰年。在这种情况下返回字符串”非闰年”。
如果年份不能被100整除，但可能被4整除，仍然有可能是闰年。检查年份除以4的余数是否为0。如果是，则年份为闰年。在这种情况下返回字符串”闰年”。
如果年份既不能被100整除，又不能被4整除，则它不是闰年。在这种情况下返回字符串”非闰年”。

示例：检查一个年份是否是闰年

首先，我们需要创建一个Vue项目。您可以参考此页面来完成创建。在Vue项目中创建两个文件app.js和index.html。以下是这两个文件的代码片段的文件和目录结构。将以下代码片段复制并粘贴到您的Vue项目中，并运行Vue项目。您将在浏览器窗口中看到以下输出。

文件名 – app.js
目录结构 – $ project/public — app.js

// Defining the years & checking if its leap or not
const parent = new Vue({
   el: "#parent",
   data: {
      year1: 2021,
      year2: 1996,
      year3: 1900,
      year4: 2000,
      year5: 1997,
   },

   filters: {
      leapyear: function (year) {
         if (year % 100 === 0) {
            if (year % 400 === 0) {
               return "Leapyear";
            } else {
               return "Non-Leapyear";
            }
         } else {
            if (year % 4 === 0) {
               return "Leapyear";
            } else {
               return "Non-Leapyear";
            }
         }
      },
   },
});

文件名 – index.html
目录结构 — $ 项目名称/public — index.html

<html>
<head>
   <script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id='parent'>
         <!-- Checking if an year is leap or not -->
         <p><strong>{{year1}} : </strong>
            {{ year1 | leapyear }}
         </p>

         <p><strong>{{year2}} : </strong>
            {{ year2 | leapyear }}
         </p>

         <p><strong>{{year3}} : </strong>
            {{ year3 | leapyear }}
         </p>

         <p><strong>{{year4}} : </strong>
            {{ year4 | leapyear }}
         </p>

         <p><strong>{{year5}} : </strong>
            {{ year5 | leapyear }}
         </p>

      </div>
      <script src='app.js'></script>
   </body>
</html>

运行以下命令以获取下面的输出结果−

C://my-project/ > npm run serve

完整代码

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id='parent'>
         <p><strong>{{year1}} : </strong> {{ year1 | leapyear }} </p>
         <p><strong>{{year2}} : </strong> {{ year2 | leapyear }} </p>
         <p><strong>{{year3}} : </strong> {{ year3 | leapyear }} </p>
         <p><strong>{{year4}} : </strong> {{ year4 | leapyear }} </p>
         <p><strong>{{year5}} : </strong> {{ year5 | leapyear }} </p>
      </div>
      <script>

         // Defining the years & checking if its leap or not
         const parent = new Vue({
            el: "#parent",
            data: {year1: 2021, year2: 1996, year3: 1900, year4: 2000, year5: 1997,},
            filters: {
               leapyear: function(year) {
                  if (year % 100 === 0) {
                     if (year % 400 === 0) {
                        return "Leapyear";
                     } else {
                        return "Non-Leapyear";
                     }
                  } else {
                     if (year % 4 === 0) {
                        return "Leapyear";
                     } else {
                        return "Non-Leapyear";
                     }
                  }
               },
            },
         });
      </script>
   </body>
</html>

在上面的示例中，我们检查五年，并显示特定年份是闰年还是非闰年。