<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        th,td{border: 1px solid black;}
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"/>
        <button @click="type = 0">原序</button>
        <button @click="type = 1">升序</button>
        <button @click="type = 2">降序</button>
        <table>
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量值</th>
                <th>选择</th>
            </tr>
            <!-- 这里遍历新数组 -->
            <tr v-for="(hero,index) in newH" :key="hero.id">
                <td>{{index}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox"/></td>
            </tr>
        </table>
        <button @click="addHero()">按一下</button>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                type : 0,
                msg : "",
                heros : [
                    {id:"101",name:"Jerry",power:10000},
                    {id:"102",name:"Tom",power:9000},
                    {id:"103",name:"Jack",power:8000},
                    {id:"104",name:"Rose",power:6000}
                ]
            },
            methods : {
                addHero()
                {
                    this.heros.unshift({id:"1000",name:"Top",power:4000});
                }
            },
            computed : {
                newH(){
                    //执行过滤
                    const arr = this.heros.filter((hero) => {
                        return hero.name.indexOf(this.msg.toLowerCase()) >= 0 || hero.name.indexOf(this.msg.toUpperCase()) >= 0;
                    });
                    //排序
                    // 升序
                    if(this.type === 1)
                    {
                        arr.sort((a,b) => {
                            return a.power - b.power;
                        });
                    }
                    // 降序
                    else if(this.type === 1)
                    {
                        arr.sort((a,b) => {
                            return b.power - a.power;
                        });
                    }
                    //返回
                    return arr;
                }
            }
        });
        let arr = [6,7,8,9,10,0,1,2,3,4,5];
        arr.sort((a,b) => {
            // sort和filter不一样,sort不会生成一个新的数组,而是在原基础上修改
            // 会导致原数组被修改
            // a-b是升序
            return a - b;
            // b-a是降序
        });
        console.log(arr);
    </script>
</body>
</html>