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

最新推荐文章于 2024-06-27 17:22:19 发布
最新推荐文章于 2024-06-27 17:22:19 发布
阅读量790 收藏 4
点赞数 1
分类专栏： 前端 文章标签： javascript vue web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/119543914
版权
本文展示了如何在Vue3.0中实现列表的模糊查询过滤功能。通过监听用户输入并使用计算属性或watcher实时更新过滤后的列表，确保在搜索后仍能恢复到初始状态。示例代码详细解释了如何使用indexOf方法检查姓名中是否包含查询关键字，以及如何使用新数据组保存过滤结果，避免原始数据被修改。
摘要由CSDN通过智能技术生成

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.虽然实现了模糊查询，但是当查询过某一个后，在想重新从最初的姓名开始查询，就会出现显示空白的情况，因为我们在代码中把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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

<!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
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端列表筛选过滤库
孤独--患者的博客
05-30 628
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdnjs...
2021 前端 VUE 面试题总汇
m0_54861649的博客
02-23 276
文章目录 1、vue的生命周期 2、Vue2.x 双向绑定原理 3、Vue3.x 响应式原理 4、v-for 为什么要加上 key 5、Vdom的理解 6、vuex 的结构，以及 actiion 和 mutation 的区别 7、axios 的原理以及优点，如何终止 axios 请求 8、vue 的缺点 9、vue 和 react 区别 10、computed 和 watch 区别，以及 computed 如何实现缓存和更新的 11、hash 和 history 区别 ，分别是怎么实现的 12
Vue-3列表过滤
qq_42854305的博客
07-08 223
【代码】Vue-3列表过滤。
vue3 中的根据某些特定的文字来筛选数组数据
最新发布
阿乐的博客
06-27 286
这样的数据 我想根据 hallName 来筛选数据。我不需要 带有下面字符换的数组数据。使用some 筛选一下 数据。现在有一批这样的数据。
Vue-列表过滤
m0_73839298的博客
05-16 695
什么是列表过滤？什么是列表过滤？
搜索结果过滤 列表过滤
greed
08-12 683
搜索结果过滤 列表过滤 搜索效果显示 <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {{p.name}}-{{p.age}}-
[vue] vue3.x 前端列表搜索过滤
qq_34450741的博客
05-30 1861
vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库 一、效果图 二、组件代码 <template> <div class="market-details-container"> <input type="text" v-model="userSearch" p.
vue基础
qq_57597418的博客
08-06 529
vue基础1
【Vue知识点- No3.】基础API、计算属性、过滤器、侦听器、品牌管理案例
qq_48687155的博客
07-29 193
vue知识点：基础API、计算属性、过滤器、侦听器、品牌管理案例
Day03_基础API_计算属性_过滤器_侦听器_品牌管理案例
无
10-17 145
Day03_基础API_计算属性_过滤器_侦听器_品牌管理案例 知识点自测 今日学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法 情况1: 根元素变了, 删除重建 情况2: 根元素没变, 属性改变, ==元素复用==, 更新属性 1.4_vue基础_diff算法-key 情况3: 根元素没变, 子元素没变, 元素内容改变 无key - 就地更新 有key - 值为索引 有key - 值
前端过滤List和 前端超过字数显示省略号
看一点点书，懂一点点道理，过好这一生
07-28 144
前端过滤List和前端超过一定字数显示省略号
前端项目实战玖拾玖react-admin+material ui-踩坑-List的用法之filters解决过滤的问题
qq_41632427的博客
07-29 189
前端
Vue列表过滤（过滤|排序不分家）-尚硅谷张天禹（笔记）
u011150251的博客
03-23 536
根据尚硅谷讲师张天禹老师VUe课程其中的一节Vue列表过滤整理的一篇笔记，学习记录，敬供参考。
【Vue基础三】----列表过滤实现搜索功能+列表排序
hannah2233的博客
09-16 480
/ 原顺序 1降序 2升序。// 用computed实现。// 用computed实现。// 判断一下是否需要排序。
萌新VueDay3——列表渲染检索列表（过滤、排序sort）
weixin_45019566的博客
12-30 279
萌新Vue入门Day3——过滤、排序 列表渲染 检索 通过text框输入关键字进行检索 <div id="test"> <input type="text" v-model="searchname"> <ul> <li v-for="(p,index) in newStudents" :key="index"> ...
vue 的指令与过滤器
酷爱前端的小陈博客
04-15 3386
1. 指令的概念 指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类： ① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令 注意：指令是vue 开发中最基础、最常用、最简单的知识点。 1.1 内容渲染指令 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个： 1、v-text...
过滤list集合
weixin_46005550的博客
04-08 223
过滤list集合 主要是记录list集合中有重复的，需过滤掉重复内容 方法一： 重写Object过滤方法（确保自己所有代码中不会用到原有的过滤方法） @Override public int hashCode() { //根据那个字段去重 return this.getAuthorityId(); } @Override public boolean equals(Object o) { //AuthorityTree 去重的实体类 if
帮我生成一份前端vue3.0加Javascript的前端项目框架
06-06
好的，以下是一个简单的前端Vue 3.0和JavaScript项目框架： 1. 首先，你需要安装 Node.js 和 Vue CLI。请确保你已经安装了最新版本的 Node.js 并且已经配置好了环境变量。 2. 打开命令行窗口，输入以下命令来安装 Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建一个新的 Vue 3.0 项目并且使用 JavaScript 作为主要编程语言： ``` vue create my-project --default cd my-project vue add router vue add vuex ``` 4. 经过上述步骤，你已经成功地创建了一个 Vue 3.0 项目并且添加了 Vue Router 和 Vuex。现在你可以使用以下命令启动项目： ``` npm run serve ``` 5. 接下来你可以在 src 目录下创建一个 main.js 文件，这是 Vue 3.0 项目的入口文件。在 main.js 文件中添加以下代码： ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(router).use(store).mount('#app') ``` 6. 现在你可以在 src 目录下创建一个 App.vue 文件，这是 Vue 3.0 项目的根组件。在 App.vue 文件中添加以下代码： ```html <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 7. 最后，你可以在 src/views 目录下创建一个 Home.vue 文件，这是一个简单的视图组件。在 Home.vue 文件中添加以下代码： ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { name: 'Home', data() { return { message: 'Hello, World!' } } } </script> ``` 现在你已经成功地创建了一个基于 Vue 3.0 和 JavaScript 的前端项目框架。你可以根据需要修改和扩展该框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值