v-包括的なケースの場合

<template>
    <div>
        <input type="text" placeholder="请输入过滤条件" v-model="searchName">
        <ul>
            <li v-for="(item ,index) in filterData" :key="index">
                {
    
    {
    
     item.name }} --- {
    
    {
    
     item.age }}
            </li>
        </ul>
        <button @click="orderType=1">年龄升序</button>
        <button @click="orderType=2">年龄降序</button>
        <button @click="orderType=0">正常排序</button>
    </div>
</template>

<script>
    export default {
    
    
        data() {
    
    
            return {
    
    
                searchName: '',
                orderType: 0,  // 0正常排序， 1升序， 2降序
                dataList: [
                    {
    
    name: 'tom', age: 18},
                    {
    
    name: 'cat', age: 17},
                    {
    
    name: 'bob', age: 19},
                    {
    
    name: 'loog', age: 16}
                ]
            }
        },

        computed: {
    
    
            filterData() {
    
    
                const {
    
    searchName, dataList, orderType} = this;
                let arr = dataList.filter(v => v.name.indexOf(searchName) !== -1);
                if (orderType !== 0) {
    
    
                    arr.sort((a, b) => {
    
    
                        if (orderType == 1) {
    
    
                            return a.age - b.age
                        } else {
    
    
                            return b.age - a.age;
                        }
                    });
                }

                return arr
            }
        }
    }
</script>