在VueJS中按属性对对象排序列表

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 20 }
    ]
  }
});

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

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 20 }
    ]
  },
  computed: {
    sortedItems: function() {
      return this.items.sort(function(a, b) {
        return a.age - b.age; // 按年龄升序排序
      });
    }
  }
});