列表渲染，key作用与原理，列表过滤，列表排序

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量227 收藏
点赞数
分类专栏： # VUE 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56444564/article/details/129871495
版权

v-for指令：

  • 用于展示列表数据
  • 语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
  • 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    遍历列表-->
    <h2>人员列表</h2>
    <ul>
        <li v-for="p in persons" :key="p.id">{{p.name}} - {{p.age}}</li>
    </ul>

    <!--    <h2>人员列表</h2>-->
    <!--    <ul>-->
    <!--        <li v-for="(p,index) in persons" :key="index">{{p.name}} - {{p.age}}</li>-->
    <!--    </ul>-->

    <!--    <h2>人员列表</h2>-->
    <!--    <ul>-->
    <!--        <li v-for="(a,b,c) in persons">{{a}} - {{b}} &#45;&#45; {{c}}</li>-->
    <!--    </ul>-->

    <!--    遍历对象-->
    <h2>汽车信息</h2>
    <ul>
        <li v-for="(value,k) in cars" :key="k">{{k}} -- {{value}}</li>
    </ul>

    <!--    遍历字符串-->
    <h3>测试遍历字符串</h3>
    <ul>
        <li v-for="(char,index) in strs" :key="index">
            {{char}} -- {{index}}
        </li>
    </ul>

    <!--    遍历指定次数-->
    <h2>测试遍历指定次数</h2>
    <ul>
        <li v-for="(number,index) in  5">{{number}} -- {{index}}</li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ],
            cars: {
                name: 'aodi',
                price: '18',
                color: 'balck'
            },
            strs: 'hello'
        }
    })
</script>
</body>
</html>

key作用与原理

react、vue中的key有什么作用？（key的内部原理）

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

对比规则：

旧虚拟DOM中找到了与新虚拟DOM相同的key：

若虚拟DOM中内容没变, 直接使用之前的真实DOM
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题：

若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题
 

开发中如何选择key?

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的
 

image-20210718113900024

image-20210718114304512

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>人员列表</h2>
    <button @click.once="add">添加老刘</button>
    <ul>
        <h3>index作为key</h3>
        <!--        index作为key-->
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}} - {{p.age}}<input type="text">
        </li>
    </ul>

    <ul>
        <!--        p.id作为key-->
        <h3>p.id作为key</h3>
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}} - {{p.age}}<input type="text">
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ]
        },
        methods: {
            add() {
                const p = {id: '004', name: '老刘', age: 40}
                this.persons.unshift(p)
            }
        }
    })
</script>
</body>
</html>

列表过滤

方法一：使用监听属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入姓名" v-model="keyWord">
    <ul>
        <li v-for="(p,index) in filpersons" :key="p.id">
            {{p.name}} - {{p.age}} - {{p.sex}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const 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: '男'}
            ],
            filpersons: []
        },
        watch: {
            keyWord: {
                immediate: true,
                handler(newval) {
                    this.filpersons = this.persons.filter((p) => {
                        return p.name.indexOf(newval) !== -1
                    })
                }
            }
        }
    })
</script>
</body>
</html>

方法二：使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入姓名" v-model="keyWord">
    <ul>
        <li v-for="(p,index) in filpersons" :key="p.id">
            {{p.name}} - {{p.age}} - {{p.sex}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const 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: {
            filpersons() {
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    })
</script>
</body>
</html>

列表排序

先过滤在排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入姓名" v-model="keyWord">
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="(p,index) in filpersons" :key="p.id">
            {{p.name}} - {{p.age}} - {{p.sex}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            keyWord: "",
            sortType: 0,// 0原顺序  1降序 2升序
            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: {
            filpersons() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
                if (this.sortType) {
                    arr.sort((a, b) => {
                        return this.sortType === 1 ? b.age - a.age : a.age - b.age
                    })
                }
                return arr
            }
        }
    })
</script>
</body>
</html>

阿瞒有我良计15
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序wxml列表渲染原理解析
01-03
这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 列表渲染存在的意义 以电商为例，我们希望渲染5个商品，而...
详解key在Vue列表渲染时究竟起到了什么作用
10-17
主要介绍了key在Vue列表渲染时究竟起到了什么作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
列表渲染，key的作用与原理
qq_45431103的博客
08-14 404
列表渲染，key的作用与原理
Vue 列表渲染 key的原理和作用
qq_56303170的博客
10-20 567
列表渲染 key 的原理和作用 key就是为该节点做身份标识，如果对key绑定index的值，那么很容易出现问题： 若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新——页面效果没有问题，但是效率有问题 如果解构中还包含输入类的DOM，会产生错误DOM更新——界面有问题 问题案例分析： 点击按钮，在列表的前面添加一个对象 <div id="root"> <button @click.once="add">添加一个老刘</b
八、vue-基础之列表渲染v-for、v-for中的key属性的作用
Sean_0819的博客
04-21 1176
没有key的diff算法：有key的diff算法：
初学Vue（全家桶）-第6天（vue2）：列表渲染、key的作用和原理、列表过滤、列表排序
lalala_dxf的博客
05-23 626
初学Vue 列表渲染 遍历数组类型 v-for=“p in person”:key=“p.id” v-for=“(p,index) in person”:key=“index” 遍历对象类型 key作用与原理 列表过滤 列表排序
Vue列表渲染——key的原理解析
林木木的博客
04-24 957
文章目录 前言 一、虚拟Dom渲染 二、key的使用 1.经典key错误案例：index作为key 2.如何使用key 前言 key的作用（主要）：标识节点，以便相同的节点可以被高效复用 要了解key的原理，就得先了解虚拟Dom的渲染过程 一、虚拟Dom渲染 在Vue渲染过程中，Vue会先将初始数据生成虚拟Dom（内存中），生成虚拟Dom后，再通过虚拟Dom生成真实Dom（也就是我们页面上看到的数据）。此时页面存在虚拟Dom和真实D...
React学习笔记之列表渲染示例详解
08-29
最近在学习React，学习到了列表渲染这一块，发现网上这方面的资料较少，所以自己来总结下，下面这篇文章主要给大家介绍了关于React学习笔记之列表渲染的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以...
python提取字典key列表的方法
09-21
主要介绍了python提取字典key列表的方法,涉及Python中keys方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用
大新软件老杨
01-02 2121
前言 入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。 view wx:for="{{items}}"> {{index}}: {{item.message}} view> 还有一个九九乘法表把数据直接写到wxml里的，并不是动态二维数组的列表渲染。 view wx:for="{{[1, 2,
vue中列表渲染中的key的作用
tangren_wyx的博客
04-19 584
VDOM(虚拟DOM)是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了 解决： 使用key属性 使用： <li v-for = " (item,index) in list " :key = "item.id"> 注意： 优先使用数据中能够识别...
Vue中列表渲染指令中key属性的理解
m1的博客
08-09 1930
在官网中看到v-for指令中key这一块时，对其感觉懵懵懂懂，查阅了一些资料，把自己的理解记录下来，做一个心得，不知道理解的对不对，希望有大牛指导。 参考链接：https://segmentfault.com/a/1190000013810844 Vue在更新v-for指令渲染过的HTML时，采用的是就地复用策略，也就是已有的HTML元素不在重新渲染，直接更新部分数据，这对简单的HTML来说没...
列表渲染中的key的作用
weixin_44889992的博客
04-20 977
列表渲染中的key的作用 给VDOM添加标记 如果没有key会产生的问题： VDOM是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了 解决： 使用key属性 使用： <li v-for = " (item,index) in list " :key ...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 560
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
自制植物大战僵尸：HTML5与JavaScript实现的简单游戏
m0_73367097的博客
06-08 2028
自制植物大战僵尸
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
JS-12-es6常用知识-async
m0_68467925的博客
06-13 592
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1276
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue根据后台返回json 动态生成列表
09-16
除了简单的列表渲染外，我们还可以根据需要对列表进行排序、过滤等操作。Vue提供了强大的计算属性和过滤器来帮助我们实现这些功能。 总结起来，我们只需要使用Vue的数据绑定和v-for指令，就可以轻松地根据后台返回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿瞒有我良计15

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值