Vue入门（十一）---- 计算属性实现排序功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="D:\Github\vue\lib\vue.js"></script>

    <script>
        window.onload = function() {
            new Vue({
                el: '#app',
                data: {
                    items: [20, 23, 18, 65, 32, 19, 5, 56, 41],
                    students: [
                        {name: 'jspang', age: 32},
                        {name: 'jspng', age: 70},
                        {name: 'jpang', age: 3},
                        {name: 'jspan', age: 2},
                    ]
                },
                computed: {
                    sortItems() {
                        return this.items.sort(sortNumber);
                    },
                    sortStudent() {
                        return sortByKey(this.students, 'age');
                    }
                }
            })
            // 自定义普通数组的排序，注意原生的sort()方法是以字符的形式排序的
            function sortNumber(a, b) {
                return a-b;
            }
            // 自定义 对象类型的排序
            function sortByKey(array, key) {
                return array.sort(function(a, b) {
                    var x = a[key];
                    var y = b[key];
                    return ((x<y)? -1: ((x>y)? 1: 0));
                })
            }
        }
    </script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
            <li v-for="(student, index) in sortStudent">
                    {{index}}: {{student.name}} - {{student.age}}
            </li>
        </ul>
    </div>
</body>
</html>
Vue入门（十一）---- 计算属性实现排序功能

猜你喜欢
