【Vue.js】v-ifで条件分岐させる方法

<script setup>
import { ref } from 'vue'

const isVisible = ref(true)
</script>

<template>
  <p v-if="isVisible">このテキストは表示されます</p>
  <button @click="isVisible = !isVisible">表示/非表示を切り替える</button>
</template>

<script setup>
import { ref } from 'vue'

const status = ref('unknown')
</script>

<template>
  <p v-if="status === 'success'">成功しました！</p>
  <p v-else-if="status === 'error'">エラーが発生しました。</p>
  <p v-else>ステータスが不明です。</p>

  <button @click="status = 'success'">成功</button>
  <button @click="status = 'error'">エラー</button>
  <button @click="status = 'unknown'">不明</button>
</template>

<!-- NG：間に別の要素があると v-else が認識されない -->
<p v-if="ok">OK</p>
<hr>
<p v-else>NG</p>

<!-- OK：v-if の直後に v-else を置く -->
<p v-if="ok">OK</p>
<p v-else>NG</p>

<!-- 複数の要素を、余分なDOMを増やさずにまとめて出し分ける -->
<template v-if="isLoggedIn">
  <h2>マイページ</h2>
  <p>ようこそ、{{ user.name }}さん</p>
  <button @click="logout">ログアウト</button>
</template>
<template v-else>
  <p>ログインしてください。</p>
</template>

<script setup>
import { ref } from 'vue'

const user = ref(null)

function login() {
  user.value = { name: 'ユーザー名', isAdmin: true }
}
function logout() {
  user.value = null
}
</script>

<template>
  <div v-if="user">
    <p>ようこそ、{{ user.name }}さん！</p>
    <p v-if="user.isAdmin">管理者としてログインしています。</p>
  </div>
  <p v-else>ログインしてください。</p>

  <button @click="login">ログイン</button>
  <button @click="logout">ログアウト</button>
</template>

<!-- v-if：条件が偽のとき、要素そのものを描画しない -->
<h1 v-if="ok">Hello!</h1>

<!-- v-show：常に描画し、CSSの display だけを切り替える -->
<h1 v-show="ok">Hello!</h1>

<!-- v-show は <template> と v-else には使えない -->

<script setup>
import { ref, computed } from 'vue'

const todos = ref([
  { id: 1, title: '買い物', done: false },
  { id: 2, title: '掃除', done: true }
])

// 未完了のものだけに絞り込んでから v-for に渡す
const activeTodos = computed(() => todos.value.filter(t => !t.done))
</script>

<template>
  <!-- NG：同じ要素に v-if と v-for を書く（Vue 2 と 3 で優先順位が逆） -->
  <!-- <li v-for="todo in todos" v-if="!todo.done"> -->

  <!-- OK：computed で絞り込む -->
  <ul>
    <li v-for="todo in activeTodos" :key="todo.id">{{ todo.title }}</li>
  </ul>
</template>