Javascript 如何将Vue模板标记移动到方法中？

我正在学习Vue，来自世界各地。我试图提取DOM标记以消除混乱，但我不知道如何提取

我这里有一个标记，当我在它旁边添加一个分钟选择输入时，它将变得更糟：

<select
    v-if="post_scheduleEnabled === true"
    v-model="post_buttonType"
    id="post_buttonType"
    class="some classes"
    @blur="touchField('post_buttonType')"
>
    <option value="0">12 AM</option>
    <option value="1">1 AM</option>
    <option value="2">2 AM</option>
    <option value="3">3 AM</option>
    <option value="4">4 AM</option>
    <option value="5">5 AM</option>
    <option value="6">6 AM</option>
    <option value="7">7 AM</option>
    <option value="8">8 AM</option>
    <option value="9">9 AM</option>
    <option value="10">10 AM</option>
    <option value="11">11 AM</option>
    <option value="12">12 AM</option>
    <option value="13">1 PM</option>
    <option value="14">2 PM</option>
    <option value="15">3 PM</option>
    <option value="16">4 PM</option>
    <option value="17">5 PM</option>
    <option value="18">6 PM</option>
    <option value="19">7 PM</option>
    <option value="20">8 PM</option>
    <option value="21">9 PM</option>
    <option value="22">10 PM</option>
    <option value="23">11 PM</option>
</select>

如果我在写React，我会这样做：

renderOptions = () => {
    const hours = [
        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
        13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
    ]
    return hours.map(hour => (
        <option>{hour}</option>
    ))
}

...

<select>
    {this.renderOptions()}
</select>

在Vue中执行此操作的最佳方法是什么

有没有一种方法可以让我创建一个方法并调用它

比如：

---

类似Vue的Angular创建特定属性，以允许您从HTML标记本身管理此类用例。其思想是，所有标记都集中在一个地方，正如人们所说的那样，将关注点分离，而使用React，您可以自由地将其划分到不同的方法中

解决您的案例的典型方法是使用指令和组件：

新Vue{ el:“应用程序”， 资料{ 返回{ 选项值：[0,1,2,3]， }; }, }; {{value}}

---

在这方面，Vue就像是有棱角的，很好用。如果你把它写成一个答案，我会把它标为正确的。我能够通过添加一个名为getHours的实例方法使它工作，然后我在getHours中执行了v-for=hour。我以前在文档中读过，也听过其他人说过，但我从未见过在标准情况下使用它。

<select>
    {{ renderOptions() }}
</select>