当前位置：首页 > VUE

vue点击实现排序

2026-02-25 18:11:58VUE

Vue 点击实现排序的方法

使用 v-for 和 computed 属性

在 Vue 中，可以通过 v-for 和 computed 属性实现点击排序功能。定义一个数据数组和一个排序状态变量，通过计算属性返回排序后的数组。

<template>
  <div>
    <button @click="toggleSort">按名称排序</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ],
      sortAsc: true
    };
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => {
        return this.sortAsc 
          ? a.name.localeCompare(b.name) 
          : b.name.localeCompare(a.name);
      });
    }
  },
  methods: {
    toggleSort() {
      this.sortAsc = !this.sortAsc;
    }
  }
};
</script>

使用自定义排序方法

如果需要更复杂的排序逻辑，可以定义一个方法并在点击时调用。

<template>
  <div>
    <button @click="sortBy('name')">按名称排序</button>
    <button @click="sortBy('price')">按价格排序</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', price: 2.5 },
        { id: 2, name: 'Banana', price: 1.5 },
        { id: 3, name: 'Cherry', price: 3.0 }
      ],
      sortKey: '',
      sortAsc: true
    };
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortAsc = !this.sortAsc;
      } else {
        this.sortKey = key;
        this.sortAsc = true;
      }
      this.items.sort((a, b) => {
        return this.sortAsc 
          ? a[key] > b[key] ? 1 : -1
          : a[key] < b[key] ? 1 : -1;
      });
    }
  }
};
</script>

使用 Lodash 简化排序

Lodash 提供了 _.orderBy 方法，可以简化排序逻辑。

vue点击实现排序

<template>
  <div>
    <button @click="sortBy('name')">按名称排序</button>
    <button @click="sortBy('price')">按价格排序</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', price: 2.5 },
        { id: 2, name: 'Banana', price: 1.5 },
        { id: 3, name: 'Cherry', price: 3.0 }
      ],
      sortKey: 'name',
      sortOrder: 'asc'
    };
  },
  computed: {
    sortedItems() {
      return _.orderBy(this.items, this.sortKey, this.sortOrder);
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortKey = key;
        this.sortOrder = 'asc';
      }
    }
  }
};
</script>