亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Vue 的選擇元素中循環時間值

在 Vue 的選擇元素中循環時間值

MM們 2023-05-11 14:39:50
所以我有這個我用 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 實踐”或如何將其綁定到我的選擇元素。
查看完整描述

2 回答

?
翻過高山走不出你

TA貢獻1875條經驗 獲得超3個贊

<v-col cols="12">

    <v-card>

        <v-row>

            <v-col>

                <h3>Pick your time.</h3>

                <select name="option" v-model="form.time">

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

                    <option v-bind:key="i.id" v-for="i in 11" :value="(i+8) + ':00'"> {{ `${i+8}:00` }}</option>


                </select></v-col>

        </v-row>

    </v-card>

</v-col>

<script>

    data(){

        return {

            form:{

               time:null

            }

        }

    },

</script>


查看完整回答
反對 回復 2023-05-11
?
陪伴而非守候

TA貢獻1757條經驗 獲得超8個贊

<template>

<div>

    <select v-model="selected" @change="changeSelected">

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

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

    </select>

</div>

</template>

<script>

export default {

data(){

      return{

        selected: 'Current Time'

    }

 },

 methods :{

     changeSelected(){

            console.log(this.selected)

     }

 }

}

</script>


查看完整回答
反對 回復 2023-05-11
  • 2 回答
  • 0 關注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號