vue10-4 列表过滤--搜索框案例

1. 初始版本

　　要点：

　　　　1. v-model获取输入框的值

　　　　2. filter过滤列表，使用输入值为过滤条件

　　　　注意：indexOf('str') 判断字符串中是否包含某字符，没有则返回-1，有则返回该字符在字符串中的下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤，可以用做搜索框</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员搜索：</h2>
        <input type="text" placeholder="请输入关键字" v-model="keyWord"><br/><br/>

        <div v-for="item in filpersons">
            {{item.id}}--{{item.name}}--{{item.age}}
        </div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    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: '男'},
                    ],
                    filpersons:[]
                }
            },
            // 1. 获取要过滤的条件，也就是输入的关键字：
                    // 1.1 使用v-model双向绑定输入框中的值到变量keyWord
                    //  1.2 使用监测属性watch监测变量keyWord，此时可以监测到其变动
            
            watch:{
                keyWord(newValue, oldValue){
                    // 2. 从列表中过滤出自己所需的数据：
                         // 2.1  使用filter过滤列表（filter会生成一个新的列表，此处必须赋值给新的变量，不能直接赋值到原始列表persons中）
                         
                         this.filpersons = this.persons.filter((p) =>{
                            //  2.2 使用过滤条件
                            
                            return p.name.indexOf(newValue) !== -1
                         })
                }
            }
        })
    </script>
</body>
</html>

2. 优化版

　　优化点：页面初始化，还没有输入时，想要看到所有列表的数据显示。

　　做法：利用indexOf(),当判断空字符串' '是否在某字符串时，返回的也是0，利用这点，同时修改watch中对keyWord监测属性的写法（使用完整版写法），增加immediate属性，赋值为true,使页面初始化时调用一次handler中的代码，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤，优化版</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员搜索：</h2>
        <input type="text" placeholder="请输入关键字" v-model="keyWord"><br/><br/>

        <div v-for="item in filPersons">
            {{item.id}}--{{item.name}}--{{item.age}}
        </div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    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: '男'},
                    ],
                    filPersons:[]
                }
            },
            // 1. 获取要过滤的条件，也就是输入的关键字：
                    // 1.1 使用v-model双向绑定输入框中的值到变量keyWord
                    //  1.2 使用监测属性watch监测变量keyWord，此时可以监测到其变动
            
            watch:{
                keyWord:{
                    
                    immediate: true,      // 页面初始化时调用一次handler

                    handler(newValue, oldValue){
                    // 2. 从列表中过滤出自己所需的数据：
                         // 2.1  使用filter过滤列表（filter会生成一个新的列表，此处必须赋值给新的变量，不能直接赋值到原始列表persons中）
                         
                         this.filPersons = this.persons.filter((p) =>{
                            //  2.2 使用过滤条件
                            
                            return p.name.indexOf(newValue) !== -1
                         })
                    }
                }
            }
        })
    </script>
</body>
</html>