Vue2基础篇-15-列表过滤

最新推荐文章于 2024-06-17 23:12:06 发布

Alan0517

最新推荐文章于 2024-06-17 23:12:06 发布

阅读量319

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Hmj050117/article/details/128224776

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 列表过滤</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for=" (per,index) in filPersons" :key="per.id">
                {{per.name}}--{{per.age}}--{{per.sex}}
            </li>
        </ul>
    </div>
    <script text="text/javascript">

        //使用watch监视实现

        // #region
        // new Vue({
        //     el: '#root',
        //     data: {
        //         keyWord: '',
        //         filPersons: [],
        //         persons: [
        //             { id: '001', name: '马冬梅', age: '18', sex: '女' },
        //             { id: '002', name: '周冬雨', age: '19', sex: '女' },
        //             { id: '003', name: '周杰伦', age: '20', sex: '男' },
        //             { id: '004', name: '温兆伦', age: '21', sex: '男' }
        //         ]
        //     },
        //     watch: {
        //         // 监视keyWord属性，immediate表示初始化的时候就调一下，初始化值
        //         keyWord: {
        //             immediate: true,
        //             handler(newVal) {
        //                 this.filPersons = this.persons.filter((p) => {
        //                     return p.name.indexOf(newVal) !== -1
        //                 })
        //             }
        //         }
        //     }
        // })

        // # unregion
        
        // #region
        //使用计算属性实现
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: '18', sex: '女' },
                    { id: '002', name: '周冬雨', age: '19', sex: '女' },
                    { id: '003', name: '周杰伦', age: '20', sex: '男' },
                    { id: '004', name: '温兆伦', age: '21', sex: '男' }
                ]
            },
            computed: {
                filPersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }

        })

    </script>
</body>

</html>