【Vue】コードを少し綺麗にするためのコツ

Vue

templateをあえて使用する。

  • 条件分で1つの条件分岐のみに<template>タグを使用している場合などでは、あえて全ての条件分岐に<template>タグを使用する。
  • そうすることで、インデントの抽象度を統一され、より理解し易いコードになる。
<!-- good -->
<button v-if="isA" @click="onClickA">A</button>
<template v-else>
  <button @click="onClickB">B</button>
  <button @click="onClickC">C</button>
</template>

<!-- better -->
<template v-if="isA">
  <button @click="onClickA">A</button>
</template>
<template v-else>
  <button @click="onClickB">B</button>
  <button @click="onClickC">C</button>
</template>