<template>
  <!-- 這里定義了一個無序列表 -->
  <ul>
    <!-- 使用 v-for 指令遍歷 fruits 數(shù)組，item 是當前遍歷到的元素，index 是元素的索引 -->
    <li v-for="(item, index) in fruits" :key="index">
      <!-- 顯示當前元素的索引和值 -->
      {{ index }} - {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定義一個包含水果名稱的數(shù)組
      fruits: ['蘋果', '香蕉', '橙子', '葡萄']
    };
  }
};
</script>

<template>
  <!-- 這里定義了一個無序列表 -->
  <ul>
    <!-- 使用 v-for 指令遍歷 user 對象，value 是屬性值，key 是屬性名，index 是索引 -->
    <li v-for="(value, key, index) in user" :key="key">
      <!-- 顯示索引、屬性名和屬性值 -->
      {{ index }} - {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定義一個包含用戶信息的對象
      user: {
        name: '張三',
        age: 25,
        gender: '男'
      }
    };
  }
};
</script>

<template>
  <!-- 這里定義了一個無序列表 -->
  <ul>
    <!-- 使用 v-for 指令遍歷 users 數(shù)組，user 是當前用戶對象，使用 user.id 作為 key -->
    <li v-for="user in users" :key="user.id">
      <!-- 顯示用戶的姓名 -->
      {{ user.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定義一個包含用戶信息的數(shù)組
      users: [
        { id: 1, name: '張三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    };
  }
};
</script>

<template>
  <!-- 這里定義了一個無序列表 -->
  <ul>
    <!-- 使用 v-for 指令遍歷 numbers 數(shù)組，num 是當前數(shù)字 -->
    <li v-for="num in numbers" :key="num">
      <!-- 調(diào)用 getSquare 方法計算數(shù)字的平方并顯示 -->
      {{ getSquare(num) }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定義一個包含數(shù)字的數(shù)組
      numbers: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    // 定義一個方法，用于計算數(shù)字的平方
    getSquare(num) {
      return num * num;
    }
  }
};
</script>

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '蘋果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  }
};
</script>

<template>
  <div>
    <MyComponent v-for="item in items" :key="item.id" :data="item"></MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      items: [
        { id: 1, data: '數(shù)據(jù)1' },
        { id: 2, data: '數(shù)據(jù)2' },
        { id: 3, data: '數(shù)據(jù)3' }
      ]
    };
  }
};
</script>

<template>
  <div>
    <ul>
      <!-- 沒有使用 key -->
      <li v-for="item in items">
        <input type="text" v-model="item.value">
        {{ item.name }}
      </li>
    </ul>
    <button @click="reverseList">反轉列表</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '蘋果', value: '' },
        { name: '香蕉', value: '' },
        { name: '橙子', value: '' }
      ]
    };
  },
  methods: {
    reverseList() {
      this.items.reverse();
    }
  }
};
</script>

<template>
  <div>
    <!-- 沒有使用 key -->
    <MyComponent v-for="item in items" :data="item"></MyComponent>
    <button @click="reverseList">反轉列表</button>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      items: [
        { id: 1, data: '數(shù)據(jù)1' },
        { id: 2, data: '數(shù)據(jù)2' },
        { id: 3, data: '數(shù)據(jù)3' }
      ]
    };
  },
  methods: {
    reverseList() {
      this.items.reverse();
    }
  }
};
</script>

<template>
  <ul>
    <!-- 使用計算屬性 filteredItems 渲染列表 -->
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 原始數(shù)據(jù)列表
      items: [
        { id: 1, name: '蘋果', category: '水果' },
        { id: 2, name: '香蕉', category: '水果' },
        { id: 3, name: '土豆', category: '蔬菜' }
      ],
      // 過濾條件
      selectedCategory: '水果'
    };
  },
  computed: {
    // 計算屬性，根據(jù) selectedCategory 過濾 items 列表
    filteredItems() {
      return this.items.filter(item => item.category === this.selectedCategory);
    }
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="updateItems">批量更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '蘋果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  methods: {
    updateItems() {
      // 批量更新數(shù)據(jù)
      const newItems = this.items.map(item => ({
        ...item,
        name: item.name + '（已更新）'
      }));
      this.items = newItems;
    }
  }
};
</script>

<template>
  <div>
    <!-- 使用 vue-virtual-scroller 組件 -->
    <RecycleScroller
      class="scroller"
      :items="items"
      :item-size="30"
      key-field="id"
    >
      <template #item="{ item }">
        <div>{{ item.name }}</div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      // 大量數(shù)據(jù)
      items: Array.from({ length: 10000 }, (_, i) => ({
        id: i,
        name: `Item ${i}`
      }))
    };
  }
};
</script>

<template>
  <ul>
    <!-- 調(diào)用 methods 中的 handleClick 方法 -->
    <li v-for="item in items" :key="item.id" @click="handleClick(item)">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '蘋果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  methods: {
    handleClick(item) {
      console.log(`點擊了 ${item.name}`);
    }
  }
};
</script>