如何在Vue中制作等效的JS？ n个数字递增 评论解决方案带有Vue 3的解决方案

问题描述

我正在尝试用跳过15个单位的数字进行选择（选择分钟：0分钟，15分钟，30分钟，45分钟），我已经使用EJS进行了选择：

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

它可以在EJS中使用，但是现在我正在将该组件迁移到Vue 3组件，但是我不知道该怎么做，因为for跳过了15个单位，在vue中我可以使用a跳过1个单位：

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

那么我该如何将EJS代码“翻译”为Vue？非常感谢！

解决方法

评论

因为只有四个可能的值，所以我可能只是将它们硬编码在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>

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

带有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>

,

您可以使用Modulo运算符，该运算符将根据除法结果返回true或false

<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