Vue 计算属性实现过滤关键词

效果：

计算属性-过滤.gif

html:

1.js:

$(document).ready(function() {
    Vue.use(VueRouter);

    // Page1  start
    var Page1 = Vue.extend({
        data() {
            return {
                searchTxt: '',
                list: [{
                        name: '吴邪',
                        sex: '男',
                        year: '24'
                    },
                    {
                        name: '陈皮阿四',
                        sex: '男',
                        year: '50'
                    },
                    {
                        name: '云彩',
                        sex: '女',
                        year: '20'
                    },
                    {
                        name: '阿宁',
                        sex: '女',
                        year: '23'
                    }
                ],
            }
        },
        computed: {
            // 计算数学，匹配搜索
            filteredArticles: function() {
                var articles_array = this.list,
                    searchString = this.searchTxt;

                if (!searchString) {
                    return articles_array;
                }

                searchString = searchString.trim().toLowerCase();

                articles_array = articles_array.filter(function(item) {
                    if (item.name.toLowerCase().indexOf(searchString) !== -1) {
                        return item;
                    }
                })

                // 返回过来后的数组
                return articles_array;;
            }
        },
        template: "#page1",
        watch: {
            filteredArticles(newVal, oldVal) { //监控单个变量
                var arr = newVal;
                if (arr.length <= 0) {
                    $('#NoMoreTxt').text('暂无相关数据');
                } else {
                    $('#NoMoreTxt').text('已经到底部了');
                }

            }
        }
    })
    //Page1  end

    var router = new VueRouter({
        routes: [{
            path: '/',
            name: 'Page1',
            meta: {
                index: 0,
                keepAlive: true,
                title: '页面1'
            },
            component: Page1
        }]
    })

    var app = new Vue({
        el: '#app',
        router
    }).$mount('#app')
})

1.css:

@CHARSET "UTF-8";

body {
    width: 100%;
    height: 100%;
}

body,
div,
p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.blue {
    color: lightseagreen;
    font-weight: bold;
}

table,
tr {
    width: 100%;
}

.searchInput {
    width: 60%;
    height: 30px;
    margin: 50px 0 20px 0;
    border-radius: 10px;
    padding-left: 10px;
    outline: none;
    border: 1px solid #111;
}

.p_list {
    width: 100%;
    display: flex;
    margin: 20px 0;
}

.p_list span {
    width: 25%;
    display: inline-block;
}

.NoMore {
    font-size: 14px;
    color: #888;
    margin-top: 30px;
    text-align: center
}

.NoMoreTxt:before {
    content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 1px;
    background-color: #dadada;
}

.NoMoreTxt:after {
    content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    background-color: #dadada;
    margin-bottom: 5px;
    margin-left: 10px;
}