升序 降序 排列（vue）

展示

升序降序

 步骤

1.创建button 分别添加click事件，并每个升序降序原序都设置value值

2.v-for遍历数组（filter）

3.返回数据：songs数组中的每个对象，并设置value值为0

4.计算属性进行计算：filter筛选数组并对value值进行判断

 html

<div id="app">
        <ul>
            <li v-for="(song,index) in filterArr" :key='index' >{{ song.name }}</li>
            <button @click="value=1">升序</button>
            <button @click="value=2">降序</button>
            <button @click="value=0">原序</button>
        </ul>
</div>

js

export default {
data(){
    return{
        content:'',
        value:'0',
        songs:[
        {id:1,name:'1.TIC'},
        {id:3,name:'3.红弁庆'},    
        {id:2,name:'2.Radical Love'}
    ]
    }
},
// 计算属性
computed:{
    filterArr(){
        console.log(this.songs);
        const arr =  this.songs.filter((song) =>{
        return song.name.indexOf(this.content) >= 0
    })
        if(this.value === 1){
         arr.sort((a,b) =>{
            return a.id-b.id
        })
    }else if(this.value === 2){
        arr.sort((a,b) => {
            return b.id - a.id
        }) 
    }
        return arr
    }
}
}