为表的VueJS中的映射数组创建自定义函数

// 假设有一个映射数组
data() {
  return {
    items: [
      { id: 1, name: 'Apple', price: 10 },
      { id: 2, name: 'Banana', price: 5 },
      { id: 3, name: 'Orange', price: 8 }
    ]
  }
},

// 创建计算属性来处理映射数组
computed: {
  filteredItems() {
    // 过滤出价格大于等于8的商品
    return this.items.filter(item => item.price >= 8);
  },
  
  sortedItems() {
    // 根据价格从低到高排序商品
    return this.items.sort((a, b) => a.price - b.price);
  },
  
  mappedItems() {
    // 将商品名称映射为大写形式
    return this.items.map(item => item.name.toUpperCase());
  }
}

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