Vue列表渲染v-for用法完全解析

<ul>
    <li v-for="item in names">{{item}}</li>
</ul>

<ul>
    <li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
</ul>

<ul>
    <li v-for="item in info">{{item}}</li>
</ul>

<ul>
    <li v-for="(value, key) in info">{{value}} - {{key}}</li>
</ul>

<ul>
    <li v-for="(value, key, index) in info">{{value}} - {{key}} - {{index}}</li>
</ul>

<!-- 推荐：使用唯一标识符 -->
<ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
</ul>

<!-- 避免使用索引作为key -->
<ul>
    <li v-for="(item, index) in items" :key="index">{{item}}</li>
</ul>

<span v-for="n in 5" :key="n">{{ n }}</span>

<template v-for="item in items">
    <h3>{{ item.title }}</h3>
    <p>{{ item.description }}</p>
</template>

<div v-for="category in categories" :key="category.id">
    <h3>{{ category.name }}</h3>
    <ul>
        <li v-for="item in category.items" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</div>

<li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
</li>

<!-- 使用计算属性过滤 -->
<li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
</li>

<script>
computed: {
    activeUsers() {
        return this.users.filter(user => user.isActive);
    }
}
</script>

<template>
    <ul>
        <li v-for="item in filteredItems" :key="item.id">
            {{ item.name }}
        </li>
    </ul>
</template>

<script>
export default {
    computed: {
        filteredItems() {
            return this.items.filter(item => item.price < 50);
        }
    }
}
</script>

// 以下操作不会触发视图更新！
this.letters[0] = 'BBB'; // ❌ 非响应式

methods: {
    btnClick() {
        // 清空数组的几种方式
        this.letters = []; // 方法1：重新赋值（响应式）
        this.letters.splice(0); // 方法2：删除所有元素（响应式）
        
        // 删除部分元素
        const startIndex = 2;
        this.letters.splice(startIndex, this.letters.length - startIndex);
        
        // 批量替换元素
        this.letters.splice(1, 3, 'X', 'Y', 'Z'); // 从索引1开始替换3个元素
    }
}

<div id="app">
    <input v-model="newItem" @keyup.enter="addItem">
    <ul>
        <li v-for="(item, index) in items" :key="item.id">
            {{ item.text }}
            <button @click="removeItem(index)">删除</button>
        </li>
    </ul>
</div>

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(person, index) in persons" :key="person.id">
            <td>{{ index + 1 }}</td>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
        </tr>
    </tbody>
</table>