条件分岐: v-if, v-else-if, v-else

テンプレートの中で条件分岐したい場合v-ifv-else-ifv-elseが使えます。これらは必ず同じ階層にある必要があります。またv-else-ifv-elseは単体では使えず同階層にv-ifが必要です。

です。

<template>
  <span v-if="num === 1">one {{num}}</span>
  <span v-else-if="num === 2">two {{num}}</span>
  <span v-else>three {{num}}</span>
</template>

<script>
export default {
  data() {
    return {
      num: 1
    };
  }
};
</script>