我怎样才能在 vue 中做一个等效的 JS？（n 个数字递增）

Question

我正在尝试制作一个 select 数字跳过 15 个单位（这是一个 select 分钟：0 分钟、15 分钟、30 分钟、45 分钟），我已经使用 EJS 制作：

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

它在 EJS 中有效，但现在我正在将该组件迁移到 Vue 3 组件，但我不知道如何做这样的 for，在 vue i 中跳过 15 个单位可以使用 a 跳过 1 个单元：

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

那么我怎样才能将 EJS 代码“翻译”成 Vue？非常感谢！

Answer 1

解决方案

我会使用计算的属性来处理这个问题：

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>

Answer 2

你可以做的是使用模运算符，它将 return 根据除法结果

为真或为假

<option v-for="i in 60" v-if="i % 15 == true">{{ i - 1 }} minutes</option>

此循环将遍历每个值 1...60 并将其除以 15，仅在结果为真时打印结果。

同时使用 v-for 和 v-if 通常是不好的做法，但这会让您到达想要的位置。

结果：

0 minutes
15 minutes
30 minutes
45 minutes

我怎样才能在 vue 中做一个等效的 JS？（n 个数字递增）

How can i do an equivalent JS for in vue? (Increments in n numbers)

for-loop

vue.js

v-for

评论

解决方案

使用 Vue 3 的解决方案

我怎样才能在 vue 中做一个等效的 JS？ （n 个数字递增）

How can i do an equivalent JS for in vue? (Increments in n numbers)

for-loop

vue.js

v-for

评论

解决方案

使用 Vue 3 的解决方案

我怎样才能在 vue 中做一个等效的 JS？（n 个数字递增）