Vue2基础篇-15-列表过滤

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>

你可能感兴趣的:(Vue2+Ts,基础篇,vue.js,javascript,前端)