【Vue2.0学习】— 列表过滤(四十)

简介: 【Vue2.0学习】— 列表过滤(四十)

数据监视实现:

<div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 20,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 22,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 18,
                    sex: '男'
                }, {
                    id: '004',
                    name: ' 任嘉伦',
                    age: 29,
                    sex: '男'
                }],
                filPersons: []
            },
            watch: {
                //简写形式
                //     keyWord(val) {
                //         //filter不更改原数组,它是返回一个新的数组
                //         this.persons = this.persons.filter((p) => {
                //             return p.name.indexOf(val) !== -1
                //         })
                //     }
                //
                keyWord: {
                    immediate: true,
                    deep: true,
                    handler(val) {
                        this.filPersons = this.persons.filter((p) => {
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })
    </script>

计算属性实现:

<div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 20,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 22,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 18,
                    sex: '男'
                }, {
                    id: '004',
                    name: ' 任嘉伦',
                    age: 29,
                    sex: '男'
                }]
            },
            // 使用 computed实现
            computed: {
                filPersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>


相关文章
|
1月前
|
JavaScript
vue element plus Descriptions 描述列表
vue element plus Descriptions 描述列表
93 0
|
1月前
|
JavaScript 前端开发
如何实现vue中的列表动画,如何封装vue动画
如何实现vue中的列表动画,如何封装vue动画
|
1月前
|
存储 JavaScript 前端开发
从入门到项目实战 - Vue 列表渲染
从入门到项目实战 - Vue 列表渲染
61 0
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2
|
4天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
11 3
|
4天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
16 2
|
1月前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
19 0
|
1月前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
18 0
|
1月前
|
JavaScript 前端开发 索引
vue 列表渲染
vue 列表渲染
|
1月前
|
JavaScript 网络架构
列表进入详情页传参问题(vue的问题)
列表进入详情页传参问题(vue的问题)
11 0