Vue通过input输入框关键字对数据进行筛选

lixww.cn

已于 2022-08-05 10:24:05 修改

阅读量1.3k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-08-05 10:23:11 首次发布

本文链接：https://blog.csdn.net/Anoxia_li/article/details/126172482

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>筛选列表</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="keyWord">
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{index}}--{{p.name}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        var vm = new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    persons: [
                        { name: '小明', age: '19', sex: '男' },
                        { name: '小红', age: '18', sex: '女' },
                        { name: '老刘', age: '30', sex: '男' },
                        { name: '老张', age: '33', sex: '男' },
                    ],
                    filPersons: []//接收watch的值
                }
            },
            //方法一
            computed: {
                //写法一
                // filPersons() {
                //     var _this = this
                //     return this.persons.filter(function (val) {
                //         return val.name.indexOf(_this.keyWord) != -1
                //     })
                // }

                // 写法二
                // filPersons() {
                //     return this.persons.filter(p=>{
                //         return p.name.indexOf(this.keyWord) != -1
                //     })
                // }
            },
            //方法二
            watch: {
                //写法一
                // keyWord: {
                //     immediate: true,//立即执行handler
                //     handler() {
                //         _this = this
                //         this.filPersons = this.persons.filter(function (val) {
                //             return val.name.indexOf(_this.keyWord) != -1
                //         })
                //     }
                // }

                //写法二
                keyWord: {
                    immediate: true,//立即执行handler
                    handler() {
                        this.filPersons = this.persons.filter(p => {
                            return p.name.indexOf(this.keyWord) != -1
                        })
                    }
                }
            }
        })
    </script>
</body>
</html>