Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue.jsの条件付きレンダリング(v-ifなど)まとめ

More than 1 year has passed since last update.

v-if

条件を満たしている場合、描画されます。

<div id="app">
  <h1 v-if="visible">Text</h1>

  <!--templateタグ指定でもOK-->
  <template v-if="visible">
    <h1>Text1</h1>
    <h1>Text2</h1>
    <h1>Text3</h1>
  </template>

  <button @click="visible = !visible">
    {{ visible ? "表示してます" : "非表示です"}}
  </button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      visible: true
    }
  })
</script>

v-show

条件を満たしていない場合、display:noneをスタイルに追加します。
そのためtemplateタグでは使用できません。ですが初期描画は遅いですが、v-ifと比べて処理が発生するときのコストが低いです。

とても頻繁に、切り替える場合はv-showを使用しましょう。

<div id="app">
  <h1 v-show="visible">Text</h1>
  <button @click="visible = !visible">
    {{ visible ? "表示してます" : "非表示です"}}
  </button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      visible: true
    }
  })
</script>

v-else

条件を満たしていない場合、描画されます。
v-ifの直後でないと使用できません。

<div id="app">
  <p v-if="visible">OK!</p>
  <p v-else="visible">Not OK...</p>
  <button @click="visible = !visible">
    反転
  </button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      visible: true
    }
  })
</script>

v-else-if

ちょっと複雑な条件式を指定できます。
v-ifの直下でないと使用できません。

<div id="app">
  <p v-if="count == 0">カウント0</p>
  <p v-else-if="count >= 1 && count <= 5">カウント1以上かつ5以下</p>
  <p v-else>カウント6以上</p>
  <button @click="count += 1">
    +1
  </button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      count: 0
    }
  })
</script>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away