vue.js - 我怎样才能在 vue 中做一个等效的 JS？ (n 个数字递增)

Question

我正在尝试使用跳过 15 个单位的数字进行选择(这是分钟的选择:0 分钟、15 分钟、30 分钟、45 分钟)，我使用 EJS 完成了它:

<% for(let x = 0; x < 60; x+= 15) { %>
   <option value="<%= x %>"><%= x %> minutes</option>
<% } %>

它在 EJS 中工作，但现在我正在将该组件迁移到 Vue 3 组件，但我不知道我该怎么做，因为它跳过了 15 个单位，在 vue 中我只能使用 a 跳过 1 个单元:

<option v-for="i in 60" :key="i" :value="i">{{ i }} minutes</option>

那么我如何将 EJS 代码“翻译”成 Vue？非常感谢!

Answer 1

评论

因为这只有 4 个可能的值，所以我可能只是将它们硬编码到一个 util 库中并将它们导入到我需要它们的组件中

解决方案

我会使用计算属性来处理这个:

new Vue({
  computed: {
    timeIntervals() {
      let time = 0;
      let ret = [];

      while (time < 60) {
        ret.push(time);
        time += 15;
      }

      return ret;
    }
  },
}).$mount('#root');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <select>
    <option v-for="interval in timeIntervals" :key="interval" :value="interval">{{interval}}</option>
  </select>
</div>

我在计算属性中生成间隔数组，然后在模板内部使用它来显示每个间隔

使用 Vue 3 的解决方案

const App = {
  computed: {
    timeIntervals() {
      let intervals = [];

      for (let i = 0; i < 60; i += 15) {
        intervals.push(i);
      }

      return intervals;
    },
  }
}

Vue.createApp(App).mount('#root')

<script src="https://unpkg.com/vue@next"></script>


<div id="root">
  <select>
    <option v-for="interval in timeIntervals" :key="interval" :value="interval">{{interval}}</option>
  </select>
</div>