[vue]使用computed属性完成条件排序

使用select来设置条件，对列表进行不同的排序方式

1.使用计算属性来完成对json数据的排序，并不改变原数据
2.用v-model对select的选择做双向绑定，v-for对不同的条件渲染不同的值

<div>
    <select v-model="selected">
        <option v-for="item in sort" :value="item.value">{{item.title}}</option>
    </select>
    <ul>
        <li v-for="item in changeFor(selected)">{{item.title}}--价格：{{item.price}}--星级：{{item.star}}</li>
    </ul>
</div>

👆这里代码比较简单，一个select 一个ul列表

data(){
    return{
        sort:[
            { value:'default', title:'推荐'},
            {value:'star', title:'星级' },
            { value:'price', title:'价格'}
        ],
        selected:'defalut',//默认选择
        list:[
            {price:3,star:8.4,title:'三'},//随便写的json数据
            {price:1,star:2.7,title:'一'},
            {price:8,star:3.2,title:'八'},
            {price:4,star:5.6,title:'四'},
        ]
    }
},
computed:{
    sotrsPrice(){//简单的价格排序
        let listPrice = this.list.slice(0)//对象深拷贝，可以不改变原数据
        return listPrice.sort((a,b)=>{
            return a.price - b.price
        })
    },
    sotrsStar(){//根据星级排序
        let listStar = this.list.slice(0)
        return listStar.sort((a,b)=>{
            return a.star - b.star
        })
    },
},
methods:{
    changeFor(val){//根据不同的条件让v-for渲染不同的数据
        switch (val){
            case 'defalut':
                return this.list
            case 'star':
                return this.sotrsStar
            case 'price':
                return this.sotrsPrice
        }
    }
}

👆使用一个methods函数判断当前select的值，将方法用在v-for里，返回不同的computed方法后的数据

• 刚开始想到用v-if来做判断，展示不同的ul列表，效果可以实现，但ul里面的代码比较多，不够优雅。
• 试着换一种方法，但思路卡壳主要就是在如何用v-for渲染不同的数据，一直在研究应该可以和v-if配合，发现这条路不可行，阅读文档时发现列表渲染可以使用methods对数据进行处理，遂想到判断selected的值返回不同的结果，效果是一样的。
• 注意一点，computed会改变原数据，导致无法再返回默认排序，所以用深拷贝方法，可以不改变原数据。

（By The Way：多阅读文档，真可以少走很多弯路）