vue例子，搜索+排序

没组件版本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格组件</title>
    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
    <style>
        #div1 {
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div id="div1" class="container">
    <label>
        serch: <input type="text" v-model="searchQuery">
    </label>

    <table class="table">
        <thead class="bg-primary">
        <tr>
            <th>name</th>
            <th>power</th>
        </tr>

        </thead>
        <tbody>
        <tr v-for="item in filteredData">
            <td>{{item.name}}</td>
            <td>{{item.power}}</td>
        </tr>

        </tbody>
    </table>

</div>

</body>
<script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#div1',
        data: {
            searchQuery: '',
            gridData: [
                {name: 'Chuck Norris', power: Infinity},
                {name: 'Bruce Lee', power: 9000},
                {name: 'Jackie Chan', power: 7000},
                {name: 'Jet Li', power: 8000}
            ]
        },
        computed: {
            filteredData: function () {
                var data = this.data;
                var filterKey= this.filterKey&&this.filterKey.toLowerCase();
                if (filterKey) {
                    data = data.filter((row) => {
                        return Object.keys(row).some((key) => {
                            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                        })
                    });
                }
                return data;
                //注意 此处 data 改变，不会影响 gridData
               /* 简化版本为
                var a =[];
                var b= a;
                b=[]//此时a不会变，只是把b重新指向了一个新的内存地址而已
                阔以参考 对象 深拷贝浅拷贝
                */


                /*
                //比较lou的写法，写两个return, 还要 if else
                if (this.searchQuery) {
                    return data.filter((row) => {
                        return Object.keys(row).some((key) => {
                            return String(row[key]).indexOf(this.searchQuery) > -1
                        })
                    });
                }else{
                    return data;
                }
               */

            }
        },
    });

    var s=[{name:123}]
    var ss= s;
    ss.push({name:456})
    console.log(ss)
    console.log(s)
</script>
</html>
View Code