Vue（Javascript）「2以上5未満」みたいな条件分岐の書き方がわからない

Question

解決したいこと

下記のコードでresultsNumの値が、
①0の場合
②1〜３の場合
③4〜５の場合

のように、各条件によって表示するコンポーネントを切り分けたいです。

ただ、どうやってコードを書けばいいかわからないです。。。

<template>
<v-container>
  <v-row>
    <v-col class="text-center">
       {{ $route.params.id }}点！
    </v-col>
  </v-row>
  <v-row>
    <div v-if="resultsNum == 0">
      <p>ズバリ0ですね！</p>
    </div>
    <div v-else-if="">
      <p>ズバリ１〜３ですね！</p>
    </div>
    <div v-else-if="">
      <p>ズバリ4〜5ですね！</p>
    </div>
  </v-row>
  <v-row>
    <nuxt-link to="/">Topへ戻る</nuxt-link>
  </v-row>
</v-container>
</template>

<script>
export default {
  data() {
    return {
      resultsNum: Number(this.$route.params.id),
    }
  },
}
</script>

resultsNumはこの画面に遷移する

this.$router.push({ name: 'result-last', params: { id: points } })

でparamsで渡しています。

resultsNumは必ず0〜5の値になります。

Comments

[1T2R3M4]

https://qiita.com/kokogento/questions/3fb981e635286548a233

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

<div v-if="resultsNum == 0">
<div v-else-if="resultsNum>=1 && resultsNum<3">
<div v-else>

Comments

[Gento]

「2以上5未満」とする場合は
<div v-else-if="resultsNum>=2 && resultsNum<5">

となるわけですね！
初歩的なことですが躓いていたので感謝します！！