初识Vue - 列表搜索 - 《十年运维》

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="app">
        过滤:<input type="text" v-model="keyword" >
        <ul>
            <li v-for="(p,index) in newp">
                {{ p.name }} {{ p.sex }}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data : {
                    keyword: '',
                    persons : [
                        {id: '001',name:'马冬梅', age:19, sex: '女'},
                        {id: '002',name:'周冬雨', age:20, sex: '女'},
                        {id: '003',name:'周杰伦', age:21, sex: '男'},
                        {id: '004',name:'温兆伦', age:22, sex: '男'},
                    ],
                    newp : [
                        {id: '001',name:'马冬梅', age:19, sex: '女'},
                        {id: '002',name:'周冬雨', age:20, sex: '女'},
                        {id: '003',name:'周杰伦', age:21, sex: '男'},
                        {id: '004',name:'温兆伦', age:22, sex: '男'},
                    ],
                },
                watch: {
                    keyword(val){
                            //例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
                            // var arr = [1, 2, 4, 5, 6, 9, 10, 15];
                            // var r = arr.filter(function (x) {
                            //     return x % 2 !== 0;
                            // });
                            // r; // [1, 5, 9, 15]
                            var r = this.persons.filter(function (p) {
                                return p.name.indexOf(val) !== -1;
                            });
                            // var r = this.persons.filter((p) => {
                            //     return p.name.indexOf(val) !== -1;
                            // });
                            this.newp = r
                        }
                    }
            })
    </script>
    </body>
</html>

补充两个小点：
1.indexOf(“”)永远是返回0的
2.另外以上例子我们引入了persons 和 newp，并在开始的时候就赋予了两个值，看起来“很傻”，我们给newp赋值的初衷是因为我们刚打开页面的时候页面是需要显示值的
根据以上两点我们可以使用 watch的immediate属性，配合indexof完成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

    <div id="app">
        过滤:<input type="text" v-model="keyword" >

        <ul>
            <li v-for="(p,index) in newp">
                {{ p.name }} {{ p.sex }}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data : {
                    keyword: '',
                    persons : [
                        {id: '001',name:'马冬梅', age:19, sex: '女'},
                        {id: '002',name:'周冬雨', age:20, sex: '女'},
                        {id: '003',name:'周杰伦', age:21, sex: '男'},
                        {id: '004',name:'温兆伦', age:22, sex: '男'},
                    ],
                    newp : [],
                },
                watch: {
                    keyword: {
                            immediate: true,
                            handler(val){
                                var r = this.persons.filter(function (p) {
                                    return p.name.indexOf(val) !== -1;
                                });
                                this.newp = r
                            }

                        }


                    }
            })
    </script>

    </body>
</html>

使用计算属性（箭头函数的使用）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
    <body>

        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

        <div id="app">
            过滤:<input type="text" v-model="keyword" >
            <ul>
                <li v-for="(p,index) in newP">
                    {{ p.name }} {{ p.sex }}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data : {
                    keyword: '',
                    persons: [
                        {id: '001',name:'马冬梅', age:19, sex: '女'},
                        {id: '002',name:'周冬雨', age:20, sex: '女'},
                        {id: '003',name:'周杰伦', age:21, sex: '男'},
                        {id: '004',name:'温兆伦', age:22, sex: '男'},
                    ],
                },
                computed : {
                    newP(){
                        **这样就不行，这样不行的原因是this代表了function**
                        // return this.persons.filter(function (p){
                        //     return p.name.indexOf(this.keyword) !== -1;
                        // })

                        我们可以这样写
                        const that = this
                        return this.persons.filter(function (p){
                            return p.name.indexOf(that.keyword) !== -1;
                        })

                        第三种方式，箭头函数
                        // return this.persons.filter(p => {
                        //     return p.name.indexOf(this.keyword) !== -1;
                        // })
                    }
                }
            })
        </script>
    </body>
</html>