我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue中如何实现列表渲染,排序,过滤操作

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue中如何实现列表渲染,排序,过滤操作

这篇文章主要为大家展示了“Vue中如何实现列表渲染,排序,过滤操作”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中如何实现列表渲染,排序,过滤操作”这篇文章吧。

    1. 列表(渲染、排序、过滤)

    1.1 条件渲染指令

    有个小技巧:

     如果是查找对象中不存在的属性,返回的是一个undefined,利用这一个点不管是v-show或者是v-if,如果值等于undefined的就不显示,假设sex属性不存在

    <p v-show="student.sex">性别:{{student.sex}}</p>

    1.1.1 v-show

    v-show的原理:通过display:none 对元素进行隐藏,当满足条件时去除display:none这个样式

    适用的场景是:切换频率较高的场景

    在使用v-show隐藏元素的时候是可以获取得到元素的,而v-if 是无法获取到元素的

    1.1.2 v-if

    v-if的原理:将整个节点移除,满足条件时添加节点

    v-else、v-else-if 需要配合v-if去使用,但是结构不能被破坏

    必须要先写v-if,例如:

    v-if = "xxx"v-else = "xxx"---------------------v-if = "xxx"v-else-if = "xxx"v-else = "xxx"

    适用的场景:切换频率比较低的场景

    template

    最大的特点就是不破坏结构但是只能与 v-if 进行配合使用

    1.1.3 v-if和v-show的小案例
     <div id="root">        <h3>当前n的值为:{{n}}</h3>        <button @click="n++">点击我n加1</button>            <div class="box1" v-show = "true">你好啊!我是box1</div>             <div class="box1" v-show = "false">你好啊!我是box1</div>         <div class="box1" v-show="n === 1">你好啊!box1</div>                    <div class="box2" v-if = "true">我是box2</div>            <div class="box2" v-if = "false">我是box2</div>         <div class="box2" v-if="n === 2">我是box2</div>        <!--             3. v-else-if  , v-else , v-if 的区别            -  v-if必须先写,才能写v-else和v-else-if            -  例如:                v-if                v-if                v-if                这样是进行3次判断                -------------------------------                v-if                v-else-if                v-else-if                v-else                只要有一个判断为真,下面的语句就不执行                ----------------------------------                v-else                只要不满足v-if的条件就执行         -->         <div class="box3" v-if = "n===1">我是box31</div>           <div class="box3" v-else-if="n===1">我是box32</div>         <div class="box3" v-else-if = "n===3">我是box33</div>         <div class="box3" v-else>hhhhhhh</div>//当满足条件的时候只输出满足条件的值,例如本例子输出为 ‘我是box31'         <!--              需求:当n == 2时,在页面输出5句话             4. template                  - 最大的特点就是不破坏结构                - 但是只能和 v-if进行配合使用          -->          <template v-if="n === 2">              <h4>你好啊!</h4>              <h4>猜猜我是谁?</h4>              <h4>我是box4</h4>              <h4>你猜对了吗?</h4>              <h4>你真棒!</h4>          </template>    </div>    <script>        Vue.config.productionTip = false        let vm = new Vue({            el: '#root',            data: {                n: 0,            }        })    </script>
    1.1.4 v-for(key的原理)

    特点:

    可以遍历数组

    可以遍历对象

    可以遍历字符串

    可以遍历次数(用的很少)

    如果我们不写key,默认使用index

    作用:用于展示列表的数据

    语法v-for = "(item,index) in xxx" :key= "yyy"

    key的原理:(很重要)

    1.虚拟DOM中key的作用:

    key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

    (1). 旧虚拟DOM中找到了与新虚拟DOM相同的key

    ①若虚拟DOM中内容没变, 直接使用之前的真实DOM

    ②若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM

    (2). 旧虚拟DOM中未找到与新虚拟DOM相同的key直接创建新的真实DOM,随后渲染到到页面。

    如果使用index作为key会引发以下的问题:

    (1)如果发生逆序添加、逆序删除破坏了顺序操作就会产生没有必要的DOM更新而会造成达不到效果的问题

    (2)如果输入结构包括了输入类的DOM元素,会产生更新问题比如:input的框的数据对不上等等

    所以在开发的过程中key的使用最好是使用唯一能够标识的值作为key,比如id,Date.now(),nanoid这个包npm i nanoid等等

    Vue中如何实现列表渲染,排序,过滤操作

    Vue中如何实现列表渲染,排序,过滤操作

    1.2 列表过滤

    使用computed

     <div id="root">        <input type="text" placeholder="请输入关键字" v-model="keyword">        <br>        <ul>            <li v-for="value in filtername" :key="value.id" >                {{value.name}} -- {{value.age}} -- {{value.gender}}            </li>        </ul>    </div>    <script>      Vue.config.productionTip = false        let vm = new Vue({            el: '#root',            data: {                arr: [                    { id: "001", name: "马冬梅", age: 18, gender: "female" },                    { id: "002", name: "周冬雨", age: 55, gender: "female" },                    { id: "003", name: "周杰伦", age: 30, gender: "male" },                    { id: "004", name: "郭艾伦", age: 30, gender: "male" },                    { id: "005", name: "郭德纲", age: 30, gender: "male" },                ],                keyword:""            },            computed:{                filtername:{                    get(){                        return this.arr.filter((currentval)=>{                            return currentval.name.indexOf(this.keyword) !== -1                        })                    }                }            }        })    </script>

    使用watch

    <div id="root">        <input type="text" placeholder="请输入关键字" v-model="keyword">        <br>        <ul>            <li v-for="value in filearr" :key="value.id" >                {{value.name}} -- {{value.age}} -- {{value.gender}}            </li>        </ul>    </div>    <script>                Vue.config.productionTip = false        let vm = new Vue({            el: '#root',            data: {                arr: [                    { id: "001", name: "马冬梅", age: 18, gender: "female" },                    { id: "002", name: "周冬雨", age: 55, gender: "female" },                    { id: "003", name: "周杰伦", age: 30, gender: "male" },                    { id: "004", name: "郭艾伦", age: 30, gender: "male" },                    { id: "005", name: "郭德纲", age: 30, gender: "male" },                ],                keyword:'',                filearr:[]            },                        // 先用watch写            watch:{                keyword:{                    immediate:true,                     handler(newval,oldval){                        this.filearr = this.arr.filter((currentval)=>{                            return currentval.name.indexOf(newval) !== -1                                                    })                    }                }            }        })    </script>

    1.3 列表排序

     <div id="root">        <h3>人员排序</h3>        <input type="text" placeholder="请输入关键字" v-model="keyword">        <button @click="type = 2">年龄升序</button>        <button @click="type = 1">年龄降序</button>        <button @click="type = 0">原顺序</button>        <ul>            <li v-for="val in filtername" :key="val.id">                {{val.name}} -- {{val.age}} -- {{val.gender}}             </li>        </ul>    </div>    <script>        Vue.config.productionTip = false        let vm = new Vue({            el: '#root',            data: {                arr: [                    { id: "001", name: "马冬梅", age: 18, gender: "female" },                    { id: "002", name: "周冬雨", age: 55, gender: "female" },                    { id: "003", name: "周杰伦", age: 50, gender: "male" },                    { id: "004", name: "郭艾伦", age: 59, gender: "male" },                    { id: "005", name: "郭德纲", age: 30, gender: "male" },                ],                keyword:"",                type:0            },            computed:{                filtername:{                    get(){                        let arr = this.arr.filter((current)=>{                            return current.name.indexOf(this.keyword) !== -1                        })                        arr.sort((a,b)=>{                                                        if(this.type)                            {                                return this.type == 1 ? b.age - a.age : a.age - b.age                             }                         })                        return arr                    }                }            }        })    </script>

    以上是“Vue中如何实现列表渲染,排序,过滤操作”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    Vue中如何实现列表渲染,排序,过滤操作

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    猜你喜欢

    Vue中如何实现列表渲染,排序,过滤操作

    这篇文章主要为大家展示了“Vue中如何实现列表渲染,排序,过滤操作”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中如何实现列表渲染,排序,过滤操作”这篇文章吧。1. 列表(渲染、排序、过滤
    2023-06-29

    Vue如何实现列表过滤与排序

    这篇文章主要讲解了“Vue如何实现列表过滤与排序”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue如何实现列表过滤与排序”吧!一、数据过滤watch实现
    2023-06-30

    如何实现 Java 的降序排列?(java降序排列如何操作)

    在Java编程中,实现降序排列是一个常见的需求。以下是详细的步骤来实现Java的降序排列。一、选择合适的数据结构在Java中,常见的数据结构有数组、链表、集合等。对于需要进行降序排列的数据,我们可以选择使用数组或集合
    如何实现 Java 的降序排列?(java降序排列如何操作)
    Java2024-12-21

    Java 中如何实现 list.stream 方法的过滤操作?(Java中list.stream方法的过滤操作如何实现)

    在Java编程中,list.stream方法是一种非常强大的流式处理工具,它可以让我们以一种简洁而高效的方式对集合进行各种操作,包括过滤。本文将详细介绍在Java中如何使用list.stream方法进行过滤操作。
    Java 中如何实现 list.stream 方法的过滤操作?(Java中list.stream方法的过滤操作如何实现)
    Java2024-12-20

    在 Java 中,如何通过 list.stream 方法实现排序操作?(Java中list.stream方法的排序操作如何实现)

    在Java编程中,list.stream方法是Java8引入的一个非常强大的流式操作工具,它可以对集合进行各种复杂的操作,包括排序。本文将详细介绍在Java中如何使用list.stream方法来实现排序操作。
    在 Java 中,如何通过 list.stream 方法实现排序操作?(Java中list.stream方法的排序操作如何实现)
    Java2024-12-20

    Python如何实现过滤掉列表中唯一值

    小编给大家分享一下Python如何实现过滤掉列表中唯一值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1、filter_uniquefrom collection
    2023-06-25

    微信小程序实战中位置闹铃如何利用条件渲染实现列表控件

    微信小程序实战中位置闹铃如何利用条件渲染实现列表控件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。需求在视频第32秒左右,有一个选择编辑对象的画面,它的功能是一个列表控件。
    2023-06-19

    Java 中的 LocalDate 如何实现日期的排序操作?(java的localdate如何进行日期的排序操作)

    在Java编程中,LocalDate是一个用于表示日期的类,它提供了丰富的方法来处理日期相关的操作。其中,日期的排序是一个常见的需求,本文将介绍如何使用LocalDate类来进行日期的排序操作。一、Loca
    Java 中的 LocalDate 如何实现日期的排序操作?(java的localdate如何进行日期的排序操作)
    Java2024-12-14

    springboot中如何通过整合Mapper实现单表操作

    本文小编为大家详细介绍“springboot中如何通过整合Mapper实现单表操作”,内容详细,步骤清晰,细节处理妥当,希望这篇“springboot中如何通过整合Mapper实现单表操作”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入
    2023-06-08

    mysql中varchar类型如何实现日期进行比较、排序等操作

    这篇文章主要介绍mysql中varchar类型如何实现日期进行比较、排序等操作,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在mysql使用过程中,日期一般都是以datetime、timestamp等格式进行存储的,
    2023-06-25

    如何使用python实现时间序列预测中的数据滑窗操作

    这篇文章主要为大家展示了“如何使用python实现时间序列预测中的数据滑窗操作”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用python实现时间序列预测中的数据滑窗操作”这篇文章吧。撰写
    2023-06-29

    PHP开发中如何使用Memcache实现高效的数据缓存和排序操作?

    PHP是一种十分流行的编程语言,常用于服务器端的Web应用程序开发。随着Web应用程序用户规模的不断增长以及数据量的不断增大,高效的数据缓存和排序操作变得越来越重要。在这种情况下,Memcache是一种非常有用的工具。本文将介绍如何在PHP
    PHP开发中如何使用Memcache实现高效的数据缓存和排序操作?
    2023-11-07

    Python中如何实现二叉排序树的定义、查找、插入、构造、删除操作

    这篇文章将为大家详细讲解有关Python中如何实现二叉排序树的定义、查找、插入、构造、删除操作,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 二叉排序树的定义  二叉排序树 ( B i n a r y
    2023-06-15

    编程热搜

    • Python 学习之路 - Python
      一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
      Python 学习之路 - Python
    • chatgpt的中文全称是什么
      chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
      chatgpt的中文全称是什么
    • C/C++中extern函数使用详解
    • C/C++可变参数的使用
      可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
      C/C++可变参数的使用
    • css样式文件该放在哪里
    • php中数组下标必须是连续的吗
    • Python 3 教程
      Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
      Python 3 教程
    • Python pip包管理
      一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
      Python pip包管理
    • ubuntu如何重新编译内核
    • 改善Java代码之慎用java动态编译

    目录