如何根據一個元素顯示正確的計算值？

Question

我有這個“ roi計算器”，用戶可以在其中排列一些標簽。 而且，我有一個范圍叫做“ onlineRevenue”。 這個想法是根據在線收入數字提供最佳計划。

但是，為此，我有一些局限性 ：

• 如果onlineRevenue少於100000，我提供“ essentialYear”；
• 如果在線收入在10萬到30萬之間，則我提供“ celebrateYear”；
• 如果onlineRevenue在30萬到50萬之間，我提供“終極”；

我如何使用vue對變量“ subscriptionFee”添加此限制，以了解上述規則？

例如，有人建議使用無數據的直接數字，像那樣

          subscriptionFee: function() {
          var feesuggest = this.onlineRevenue <=100000;
          return this.essentialYear;
        },

但是想法是生成一個變量，如果值是X，則表明該變量。 有了上面的這段代碼，我無法在值之間進行比較。

我創建了一個jsfiddle來處理代碼，以便更輕松地理解我的問題。

Answer 1

這樣的解決方案怎么樣：

const tiers = [
    { name: 'essential', min: 0, max: 100000 },
    { name: 'accelerate', min: 100000, max: 300000 },
    { name: 'ultimate', min: 300000, max: 500000 }
];

const subscriptionFee = (amount) => {
  const tierMatch = (tier) => amount >= tier.min && amount < tier.max;
  const reducer = (tierFound, tier) => tierMatch(tier) ? tier : tierFound;
  return tiers.reduce(reducer, false);
};

subscriptionFee(500);

您從一系列的層開始，在這些層上進行迭代並縮減為單個項目。 您仍然需要考慮更大的數字，因為500001會給您帶來錯誤。

Answer 2

subscriptionFee: function() {
  const x = this.onlineRevenue
  switch (true) {
    case (x <= 100000):
      return this.essentialYear
      break;
    case (x > 100000 && x < 300000):
      return this.accelerateYear
      break;
    default:
      // anything over 300000
      return this.ultimate
  }
}