Vue.js: 条件付きとリストレンダリング

show = true で v-if と v-show の両方が表示される
show = false で v-if は DOM から消え、v-show は display: none で残る
type = 'B' なら B だけ表示、isAdmin = true で Admin と Edit がまとめて出る

// Switch Occasionally（If you are logged in/Not logged in）→ v-if
<div v-if="isLoggedIn">Welcome, {{ user.name }}</div>
<div v-else>Please login</div>

// Frequent switching (e.g. tab switch) → v-show
<button v-show="isActive">Active</button>
<button v-show="!isActive">Inactive</button>

1 → Apple / Banana / Cherry が li で並ぶ
2 → 1. Apple、2. Banana、3. Cherry
3 → name: Alice、age: 25、email: alice@example.com
4 → 12345、5 → H e l l o（1 文字ずつ span）

<!-- In Vue 3, v-if has higher priority than v-for (Vue 2 is the opposite) -->
<ul>
 <!-- Vue 3: First determine v-if, then v-for -->
 <li v-for="user in users" v-if="user.isActive" :key="user.id">
 {{ user.name }}
 </li>
 <!-- ✅ But Vue officially recommends using template to separate -->
 
 <!-- ❌ Incorrect wording（Not recommended） -->
 <li v-for="user in users" v-if="shouldShowUsers(user)" :key="user.id">
 {{ user.name }}
 </li>
 
 <!-- ✅ Recommendations：computed Filter -->
 <li v-for="user in activeUsers" :key="user.id">
 {{ user.name }}
 </li>
</template>

Vue 3 は v-if を先に評価するため、同じ要素に併記すると user 未定義でエラーになり得る
computed の activeUsers を v-for する 3 番目の書き方だけが安全に動く

<!-- ✅ Recommendations：The Only One ID -->
<li v-for="user in users" :key="user.id">

<!-- ✅ Second choice：Unique Field（Email、Mobile phone number, etc.）-->
<li v-for="user in users" :key="user.email">

<!-- ❌ Avoid：index（When the data changes, the alignment is off.）-->
<li v-for="(user, index) in users" :key="index">

<!-- ❌ Never, under any circumstances：random()（Every render is different，Forced Rebuild）-->
<li v-for="user in users" :key="Math.random()">

user.id / user.email / 複合キー / index の 4 つはリストが正しく描画される
Math.random() は再描画のたびにキーが変わり、全 li が作り直される

import { ref, computed } from 'vue'

const items = ref([
 { id: 1, name: 'iPhone', price: 999, category: 'phone' },
 { id: 2, name: 'MacBook', price: 2499, category: 'laptop' },
 { id: 3, name: 'iPad', price: 599, category: 'tablet' }
])

const searchQuery = ref('')
const selectedCategory = ref('all')
const sortBy = ref('price') // 'price' / 'name'

// Filter + Sort（computed Automatic Caching）
const filteredItems = computed(() => {
 let result = items.value
 
 // 1. Filter by search term
 if (searchQuery.value) {
 result = result.filter(item =>
 item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
 )
 }
 
 // 2. Filter by Category
 if (selectedCategory.value !== 'all') {
 result = result.filter(item => item.category === selectedCategory.value)
 }
 
 // 3. Sort
 result = [...result].sort((a, b) => {
 if (sortBy.value === 'price') return a.price - b.price
 if (sortBy.value === 'name') return a.name.localeCompare(b.name)
 return 0
 })
 
 return result
})

const currentPage = ref(1)
const pageSize = ref(10)

// Data after pagination
const paginatedItems = computed(() => {
 const start = (currentPage.value - 1) * pageSize.value
 return filteredItems.value.slice(start, start + pageSize.value)
})

// Total Number of Pages
const totalPages = computed(() =>
 Math.ceil(filteredItems.value.length / pageSize.value)
)

初期表示：iPad - $599、iPhone - $999、MacBook - $2499（価格の昇順）、1 / 1
検索欄に i と入れると iPad と iPhone の 2 件に絞られる
カテゴリで Laptop を選ぶと MacBook - $2499 の 1 件、Previous と Next は無効のまま