符合條件排序是Vue中非常常見的功能之一。它在數(shù)據(jù)展示和篩選中都具有很重要的作用。在實現(xiàn)這個功能之前，我們需要了解常見的排序算法，包括冒泡排序、選擇排序、插入排序、歸并排序和快速排序等。而在Vue中，我們可以使用computed來實現(xiàn)符合條件排序功能。

Computed是Vue中非常重要的一個概念，它可以算出并返回一個新的值。在Vue組件中，我們可以通過computed函數(shù)來定義計算屬性，而這些計算屬性可以依賴于其他的數(shù)據(jù)屬性。對于符合條件排序來說，我們可以將數(shù)據(jù)源綁定到一個computed計算屬性中，在計算屬性中完成排序并返回排序后的數(shù)據(jù)源。

// data
data() {
return {
items: [
{name: 'A', age: 18, city: 'Beijing'},
{name: 'B', age: 22, city: 'Shanghai'},
{name: 'C', age: 20, city: 'Guangzhou'},
{name: 'D', age: 25, city: 'Shenzhen'},
],
sortName: '',
sortOrder: '',
}
},
// computed
computed: {
sortedItems() {
let items = this.items.slice();
if (this.sortOrder !== '') {
items.sort((a, b) =>{
let sortParam = this.sortName;
let sortType = this.sortOrder;
let aValue = a[sortParam];
let bValue = b[sortParam];
if (sortType === 'asc') {
if (aValue >bValue) return 1;
if (aValue< bValue) return -1;
} else {
if (aValue >bValue) return -1;
if (aValue< bValue) return 1;
}
return 0;
});
}
return items;
}
},

在上面的代碼中，我們首先定義了一個items數(shù)組，包含我們需要排序的數(shù)據(jù)源。sortName和sortOrder變量用于保存排序的字段和類型。在sortedItems函數(shù)中，我們首先復(fù)制了一份原始數(shù)據(jù)源，然后根據(jù)sortName和sortOrder進行排序，最后返回排序后的數(shù)據(jù)源。如果sortName和sortOrder為空，則直接返回未排序的原始數(shù)據(jù)源。

在Vue組件中，我們可以通過v-for指令來遍歷排序后的數(shù)據(jù)，并將其展示在頁面上：

<table>
<thead>
<tr>
<th @click="sortByName">Name</th>
<th @click="sortByAge">Age</th>
<th @click="sortByCity">City</th>
</tr>
</thead>
<tbody>
<tr v-for="item in sortedItems" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.city }}</td>
</tr>
</tbody>
</table>

代碼中，我們通過v-for指令將排序后的數(shù)據(jù)遍歷，并將數(shù)據(jù)渲染到table元素中。thead元素中的表頭可以觸發(fā)排序功能，通過調(diào)用sortByName、sortByAge和sortByCity函數(shù)分別對應(yīng)排序參數(shù)name、age和city。

總結(jié)一下，在Vue中實現(xiàn)符合條件排序功能就是通過computed計算屬性對數(shù)據(jù)源進行排序，然后在頁面上通過v-for指令將排序后的數(shù)據(jù)渲染出來。對于復(fù)雜的排序方式，我們需要根據(jù)具體的業(yè)務(wù)邏輯來考慮實現(xiàn)方式。但無論如何，Vue的計算屬性和指令都為我們提供了非常方便的實現(xiàn)方式。