Vue通过v-for实现年份自动递增

如果我们需要在Vue中实现年份自动递增，可以通过v-for指令配合计算属性来实现，在此我提供一份完整攻略。

步骤

1. 为了实现年份自动递增，我们首先需要构建一个年份的数组。我们可以在Vue对象的data中定义一个year数组，包含需要遍历的年份。如下所示：

var app = new Vue({
  el: '#app',
  data: {
    year: [2022, 2021, 2020, 2019, 2018]
  }
})

1. 然后，在html中使用v-for指令来遍历year数组，并通过插值表达式{{}}将数组中的年份渲染到页面上。

<div id="app">
  <ul>
    <li v-for="y in year">{{ y }}</li>
  </ul>
</div>

1. 但是，我们的需求是要自动递增年份，而不是静态的渲染数组中的年份。因此，我们需要通过计算属性来实现自动递增的年份。我们可以使用JavaScript中的Date对象获取当前年份，再根据需求将其推算出后续年份，构建一个新的年份数组。如下所示：

var app = new Vue({
  el: '#app',
  data: {
    year: []
  },
  computed: {
    // 构建年份数组
    yearList: function() {
      var currentYear = new Date().getFullYear();
      var result = [];
      for (var i = 0; i < 5; i++) {
        result.push(currentYear + i);
      }
      return result;
    }
  }
})

1. 最后，我们需要将遍历年份的v-for指令中的year数组改为我们刚刚构建的计算属性yearList。如下所示：

<div id="app">
  <ul>
    <li v-for="y in yearList">{{ y }}</li>
  </ul>
</div>

这样就完成了年份自动递增的需求。

示例

为了更好地理解上述方法，我们提供两个具体的示例。

示例1

如果我们需要遍历从当前年份开始，连续的10个年份，我们可以直接修改计算属性中构建数组的代码，将循环次数改为10。示例如下：

var app = new Vue({
  el: '#app',
  data: {
    year: []
  },
  computed: {
    // 构建年份数组
    yearList: function() {
      var currentYear = new Date().getFullYear();
      var result = [];
      for (var i = 0; i < 10; i++) {
        result.push(currentYear + i);
      }
      return result;
    }
  }
})

示例2

如果我们需要遍历从当前年份开始，每隔2年的年份（包括当前年份），连续的5个年份。我们可以修改计算属性中的构建数组的代码，将循环次数改为5，且每次增加的数值改为2。示例如下：

var app = new Vue({
  el: '#app',
  data: {
    year: []
  },
  computed: {
    // 构建年份数组
    yearList: function() {
      var currentYear = new Date().getFullYear();
      var result = [];
      for (var i = 0; i < 5; i++) {
        result.push(currentYear + i * 2);
      }
      return result;
    }
  }
})

这样，计算属性yearList中的数组就变成了：[2022, 2024, 2026, 2028, 2030]。

以上就是使用Vue通过v-for实现年份自动递增的完整攻略。