Vue——列表过滤

实现名字过滤,输入一个字,就能出现带有这个字的相关的名字
Vue——列表过滤_第1张图片
Vue——列表过滤_第2张图片

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input v-model="keyWord" type="text" placeholder="请输入名字">
        <!-- 遍历列表 -->
        <ul>
            <li v-for="p in filPersons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>

    </div>
</body>
<script>
    Vue.config.productionTip = false;
    //用watch实现

    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: '男' }
            ],
            filPersons: []
        },
        watch: {
            keyWord: {
                immediate: true,
                handler(val) {
                    this.filPersons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1;
                    })
                }
            }
        }
    })

    // 用computed实现
    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>

你可能感兴趣的:(王王仙贝的Vue学习,vue.js,javascript,前端)