Vue中sort排序方法,点击按钮,不是升序就是降序

在Vue中，如果你想创建一个可以根据点击事件切换排序方式（升序或降序）的排序功能，你可以这样做：

首先，你需要在数据对象里定义一个初始排序标志，比如`sortOrder`，默认值设为`"asc"`表示升序：

data() {
  return {
    items: [/* 初始化的数据 */],
    sortOrder: "asc"
  };
},

然后，定义一个方法，比如`toggleSort`，当按钮被点击时，根据当前的`sortOrder`来决定下一次排序的方式：

methods: {
  toggleSort: function() {
    if (this.sortOrder === "asc") {
      this.items.sort((a, b) => b - a); // 如果是升序，则变为降序
      this.sortOrder = "desc";
    } else {
      this.items.sort((a, b) => a - b); // 如果是降序，则变为升序
      this.sortOrder = "asc";
    }
  }
}

最后，在模板中添加一个按钮，并绑定了`v-on:click="toggleSort"`来监听点击事件：

<button @click="toggleSort">排序</button>
<ul>
  <li v-for="(item, index) in sortedItems" :key="index">{{ item }}</li>
</ul>

// 使用计算属性sortedItems来实际排序
computed: {
  sortedItems() {
    return this.items.sort((a, b) => {
      if (this.sortOrder === "asc") {
        return a > b ? 1 : -1;
      } else {
        return a < b ? 1 : -1;
      }
    });
  }
}

在这个例子中，每当用户点击“排序”按钮，`toggleSort`方法就会被调用，然后更新`items`的排序方式，并在`sortedItems`计算属性中反映出来。