在 Vue 的选择元素中循环时间值

Question

所以我有这个我用 PHP 制作的选择框，它是在 For 循环中生成的从 9:00 到 19:00 的时间下拉列表。我用它来将选定的时间值传递给数据库。

但是，我已经尝试在 Vue 中执行此操作 3-4 天了，但一直无法找到任何有助于解决此特定问题的方法。

这是我到目前为止所拥有的：

<template>

<v-col cols="12">

    <v-card>

        <v-row>

            <v-col>

                <h3>Pick your time.</h3>

                <select name="option">

                    <option value="Current Time">Current Time</option>

                    <option v-bind:key="i.id" v-for="i in 10" :value="i">{{ i }}</option>

            

                </select></v-col>

        </v-row>

    </v-card>

    </v-col>

</template>

<script type="text/javascript">

    methods: {

        timeInt() {

            for(i = 900; i<= 1900; i+=100){

                return i;

            }

        }

    }

</script>

方法的最后一部分是我尝试在脚本中编写循环。我不知道这是否是正确的“Vue 实践”或如何将其绑定到我的选择元素。

Answer 1

<v-col cols="12">&nbsp; &nbsp; <v-card>&nbsp; &nbsp; &nbsp; &nbsp; <v-row>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Pick your time.</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="option" v-model="form.time">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Current Time">Current Time</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option v-bind:key="i.id" v-for="i in 11" :value="(i+8) + ':00'"> {{ `${i+8}:00` }}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select></v-col>&nbsp; &nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-card></v-col><script>&nbsp; &nbsp; data(){&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; form:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;time:null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },</script>

Answer 2

<template><div>&nbsp; &nbsp; <select v-model="selected" @change="changeSelected">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Current Time">Current Time</option>&nbsp; &nbsp; &nbsp; &nbsp; <option :key="index" v-for="(i,index) in 11" :value="(i+8 >=10 ? String(i+8) : '0'+(i+8)) +':00' ">{{ (i+8 >=10 ? i+8 : '0'+(i+8) )+':00' }}</option>&nbsp; &nbsp; </select></div></template><script>export default {data(){&nbsp; &nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; &nbsp; selected: 'Current Time'&nbsp; &nbsp; }&nbsp;},&nbsp;methods :{&nbsp; &nbsp; &nbsp;changeSelected(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(this.selected)&nbsp; &nbsp; &nbsp;}&nbsp;}}</script>