vue2列表排序（computed计算）

经常需要我们前端自己去对于后端数据进行排序 这里我举例对于数据里年龄的升序降序

<div>
        <input type="text" v-model="keyWords">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原数据</button>
        <ul>
            <li v-for="(item, index) in filPersons" :key="index">
                {{ item.name }}-{{ item.age }}-{{ item.sex }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'school',
    data() {
        return {
            sortType: '',//0原数据 1降序 2升序
            keyWords: '',
            persons: [
                { id: '001', name: '马冬梅', age: '30', sex: "女" },
                { id: '002', name: '周冬雨', age: '19', sex: "女" },
                { id: '003', name: '周杰伦', age: '20', sex: "男" },
                { id: '004', name: '温兆伦', age: '39', sex: "男" }
            ],
        }
    },
    computed: {
        filPersons() {
            const arr = this.persons.filter((item) => {
                return item.name.indexOf(this.keyWords) !== -1
            })
            if (this.sortType) {
                arr.sort((p1, p2) => {
                    return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                })
            }
            return arr
        }
    }
}
</script>