More than 5 years have passed since last update.

vueで条件分岐、ループをみやすくする

Last updated at 2018-08-22Posted at 2018-08-22

vueで条件分岐、ループを書く場合は以下のようになると思いますが、分岐やループしているかが分かりにくいように感じました。

vue

<template lang="pug">
div
  //- 条件分岐
  p(v-if="true") TRUE
  p(v-else) FALSE
</template>

vue

<template lang="pug">
div
  ul
    //- ループ
    li(v-for="(item, index) in [1, 2, 3]", :key="index") {{ item }}
</template>

原因は条件分岐などのロジックと表示部分が一緒になっているせいだと思うので、以下のようにtemplateを使ってロジック部分だけ抽出すると見やすくなるのかなと思いました。

vue

<template lang="pug">
div
  //- 条件分岐
  template(v-if="true")
    p TRUE
  template(v-else)
    p FALSE
</template>

vue

<template lang="pug">
div
  ul
    //- ループ
    template(v-for="(item, index) in [1, 2, 3]")
      li(:key="index") {{ item }}
</template>