代码之家 › 专栏 › 技术社区 › agm1984

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

vuejs2 vue.js javascript

agm1984 · 技术社区 · 8 年前

我在学习Vue,来自React World。我正试图提取DOM标记以消除混乱,但我不知道如何进行。

我这里有一个标记,当我在它旁边添加一分钟的select输入时,它将变得更糟:

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

如果我在写“反应”,我会这样做:

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中,最好的方法是什么?

有没有一种方法可以生成一个方法并调用它?

比如:

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

1 回复 | 直到 8 年前

ghybs 8 年前

Vue(像Angular)创建特定属性( directives )以便从HTML标记本身管理此类用例。其思想是将所有标记集中在一个位置(“ 关注点分离 “正如人们所说的那样),而有了“反应”,你就可以自由地将它分为不同的方法。

处理案件的典型方法是使用 v-for 指令和组件 data 以下内容:

new Vue({
  el: '#app',
  data() {
    return {
      optionValues: [0, 1, 2, 3],
    };
  },
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <select>
    <option v-for="value in optionValues">{{value}}</option>
  </select>
</div>

但其来源 optionValues 也可以是 computed property ,其中一个 props ,其中一个的结果 methods (就像你在评论中所做的那样),或者甚至直接(你可以通过 range )以下内容:

new Vue({
  el: '#app',
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <select>
    <option v-for="value in [0, 1, 2, 3]">{{value}}</option>
  </select>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前