前端VUE3.0,DAY19，列表过滤_前端list过滤

作者：小舞很执着 | 2024-08-18 16:28:07

踩

前端list过滤

VUE3.0,DAY19

生成一个人员列表

<!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>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--遍历数组-->
        <ul>
            <li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}</li>
            <!--使用上边的代码后，在网页中就会自动生成四个li标签内的数据。因为data中persons1有四个数据-->
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    persons1: [
                        {
                            id: '001', name: '马冬梅', age: 18, sex: '男'
                        },
                        {
                            id: '002', name: '周冬雨', age: 19, sex: '女'
                        },
                        {
                            id: '003', name: '周杰伦', age: 20, sex: '男'
                        },
                        {
                            id: '004', name: '温兆伦', age: 21, sex: '女'
                        }
                    ],
                }
            },
        })

    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

在这里插入图片描述

实现列表过滤即模糊查询

1.虽然实现了模糊查询，但是当查询过某一个后，在想重新从最初的姓名开始查询，就会出现显示空白的情况，因为我们在代码中把data中的数据修改了，每查询一次，仅保留符合条件的数据，不符合的都被去除了。
注意：indexOf查询是否包含某字符串的时候，“空”在字符串中是一定包含的。如图中所示。

<!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>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <!--增加一个列表过滤查询框，即模糊查找的功能-->
        <input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
        <!--遍历数组-->
        <ul>
            <li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}</li>
            <!--使用上边的代码后，在网页中就会自动生成四个li标签内的数据。因为data中persons1有四个数据-->
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //keywords与输入框进行了双向数据绑定，收集用户的输入内容。
                    KeyWords: '',
                    persons1: [
                        {
                            id: '001', name: '马冬梅', age: 18, sex: '男'
                        },
                        {
                            id: '002', name: '周冬雨', age: 19, sex: '女'
                        },
                        {
                            id: '003', name: '周杰伦', age: 20, sex: '男'
                        },
                        {
                            id: '004', name: '温兆伦', age: 21, sex: '女'
                        }
                    ],
                }
            },
            //监视属性，监视keywords的变化
            watch: {
                KeyWords(val) {
                    //使用过滤函数filter，过滤persons1中的数据
                    //随后在令当前的persons1中的数据等于过滤后的。
                    this.persons1 = this.persons1.filter((XianShi) => {
                        //返回姓名中包含输入val值的数据，检测是否包含字符串用indexOf
                        return XianShi.name.indexOf(val) !== -1
                        //不等于-1就是包含，等于-1就是待检测的数据中不包含指定的字符串
                    })
                }
            }
        })

    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

在这里插入图片描述

3.如何解决列表的内容越搜索越少的问题？使用一个新的数据组接收过滤后的数据，即不改动初试的数据组persons1。然后监视属性使用完整写法。immediate设置为真，当监视的数据还没发生任何变化时，就执行一次监视操作之后的返回值。
这里的原理是还没有输入任何查询字符时，即查询框为空，那么立即执行监视操作，此时监视属性中的监视value值为空，那么就返回所有的原始数据，因为所有的字符串数据使用indexof查询都含有空值。

<!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>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <!--增加一个列表过滤查询框，即模糊查找的功能-->
        <input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
        <!--遍历数组-->
        <ul>
            <li v-for="XianShi in filterpersons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}</li>
            <!--使用上边的代码后，在网页中就会自动生成四个li标签内的数据。因为data中persons1有四个数据-->
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //keywords与输入框进行了双向数据绑定，收集用户的输入内容。
                    KeyWords: '',
                    persons1: [
                        {
                            id: '001', name: '马冬梅', age: 18, sex: '男'
                        },
                        {
                            id: '002', name: '周冬雨', age: 19, sex: '女'
                        },
                        {
                            id: '003', name: '周杰伦', age: 20, sex: '男'
                        },
                        {
                            id: '004', name: '温兆伦', age: 21, sex: '女'
                        }
                    ],
                    filterpersons1: []
                }
            },
            //监视属性，监视keywords的变化
            watch: {
                KeyWords: {
                    immediate: true,
                    handler(val) {
                        //使用过滤函数filter，过滤persons1中的数据
                        //随后在令当前的filterpersons1中的数据等于过滤后的数据。
                        this.filterpersons1 = this.persons1.filter((XianShi) => {
                            //返回姓名中包含输入val值的数据，检测是否包含字符串用indexOf
                            return XianShi.name.indexOf(val) !== -1
                            //不等于-1就是包含，等于-1就是待检测的数据中不包含指定的字符串
                        })
                    }
                }
            }
        })

    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

在这里插入图片描述

计算属性实现列表过滤（模糊查询）

<!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>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <!--增加一个列表过滤查询框，即模糊查找的功能-->
        <input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
        <!--遍历数组-->
        <ul>
            <li v-for="XianShi in filterpersons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}</li>
            <!--使用上边的代码后，在网页中就会自动生成四个li标签内的数据。因为data中persons1有四个数据-->
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        /*const x = new Vue({
             el: '#root',
             data() {
                 return {
                     //keywords与输入框进行了双向数据绑定，收集用户的输入内容。
                     KeyWords: '',
                     persons1: [
                         {
                             id: '001', name: '马冬梅', age: 18, sex: '男'
                         },
                         {
                             id: '002', name: '周冬雨', age: 19, sex: '女'
                         },
                         {
                             id: '003', name: '周杰伦', age: 20, sex: '男'
                         },
                         {
                             id: '004', name: '温兆伦', age: 21, sex: '女'
                         }
                     ],
                     filterpersons1: []
                 }
             },
             //监视属性，监视keywords的变化
              watch: {
                  KeyWords: {
                      immediate: true,
                      handler(val) {
                          //使用过滤函数filter，过滤persons1中的数据
                          //随后在令当前的filterpersons1中的数据等于过滤后的数据。
                          this.filterpersons1 = this.persons1.filter((XianShi) => {
                              //返回姓名中包含输入val值的数据，检测是否包含字符串用indexOf
                              return XianShi.name.indexOf(val) !== -1
                              //不等于-1就是包含，等于-1就是待检测的数据中不包含指定的字符串
                          })
                      }
                  }
              }
             
         })*/
        //计算属性computer实现
        new Vue({
            el: '#root',
            data() {
                return {
                    //keywords与输入框进行了双向数据绑定，收集用户的输入内容。
                    KeyWords: '',
                    persons1: [
                        {
                            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: {
                filterpersons1() {
                    //第一个return是计算属性规定的要返回值
                    //第二个return是过滤属性规定的要返回值
                    //如何拿到用户输入的要检测的内容。使用this.keywords
                    return this.persons1.filter((XianShi) => {
                        return XianShi.name.indexOf(this.KeyWords) !== -1
                    })
                }
            }
        })
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/998169