如何使for循环在组件内部的属性中工作

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

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

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

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  computed: {
    filteredItemList() {
      // 在计算属性中对itemList进行筛选或处理
      return this.itemList.filter(item => item.id > 1);
    }
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">{{ getItemName(item) }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    getItemName(item) {
      // 在方法中对item进行操作
      return item.name.toUpperCase();
    }
  }
};
</script>