升序 降序 排列（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
	}
}
}