vue中列表渲染相关知识(v-for)

最新推荐文章于 2024-04-01 18:14:15 发布
最新推荐文章于 2024-04-01 18:14:15 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44998582/article/details/122473449
版权

普通的列表使用ul包含多个li实现，这样往往不够灵活。在原生js中能够动态渲染列表具体实现如下

<body>
 <ul id="list"></ul>
</body>
<script type="text/javascript">
var list = document.querySelector('#list')
    for (var i = 0; i < 5; i++) {
        var li = document.createElement('li')
        li.innerHTML = i
        list.appendChild(li)
    }
    </script>

我们再看看vue中如何实现列表渲染的

<body>
 <div id="app">
        <ul>
            <li v-for="i in list">{{i}}</li>
        </ul>
    </div>
</doby>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
list:[1,2,3,4,5]
}
})

通过js原生实现与vue实现两者代码的对比，我们可以发现实现同一个需求vue要方便得多。

vue列表渲染详讲

在用v-for进行列表渲染的时候其实会出现两个参数

<body>
    <div id="app">
        <h1>数组</h1>
        <ul>
            <li v-for="(i,j,k) in list">{{i}}--{{j}}--{{k}}</li>
        </ul>
        <h1>对象</h1>
        <ul>
            <li v-for="(i,j) in obj">{{i}}--{{j}}</li>
        </ul>
        <h1>字符串</h1>
        <ul>
            <li v-for="(i,j) in str">{{i}}--{{j}}</li>
        </ul>
        <h1>指定次数</h1>
        <ul>
            <li v-for="(i,j) in 10">{{i}}--{{j}}</li>
        </ul>
    </div>
    <ul id="list">
​
    </ul>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            list: [1, 2, 3, 4, 5],
            obj: { 'name': 'zs', 'age': 18 },
            str: 'hello'
        }})
</script>

上面代码在v-for后通过i与j接收循环的参数

从上面代码可以知道v-for可以遍历：数组、对象、字符串、指定次数(数值)。另外可以看到页面中每次都输出了两个数，分别是i与j每次接收到的值，这两个数具体的值是什么呢？其实i就是循环list时接收到的list中保存的数据，而j呢则是每个数据的索引值或者是key。

有人会想v-for是否还有第三个参数呢？在这我们可以试验一下

<ul>
<li v-for="(i,j,k) in list">{{i}}--{{j}}--{{k}}</li>
        </ul>

我们可以看到最后的k并没有被渲染出来，这是因为k没有接收到参数，所以其值为undefined。而在vue中如果值为undefined的话是不会被渲染出来的。因此也能说明v-for是没有第三个参数的

key

在上面v-for对相关数据进行遍历时能很顺利的使用，并且也没有多大的错误。但是现在呢我需要将数据与用户进行交互，实现以下功能：页面中布有一按钮以及一无序列表ul，ul中的每个li后面都带有一输入框，当用户点击按钮时就会在数组最前方插入一条数据。先用之前的方法来实现一下

<body>
    <div id="app">
        <button @click='add'>添加</button>
        <h1>数组</h1>
        <ul>
            <li v-for="(i,j) in list">{{i.name}}--{{i.age}}<input type="text"></li>
        </ul>
​
    </div>
    <ul id="list">
​
    </ul>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            list: [
                { name: 'zs', age: 18 },
                { name: 'ls', age: 19 }
            ],
        },
        methods: {
            add() {
                this.list.unshift({ name: 'ww', age: 20 })
            }
        }
    })
​
</script>

  

我们可以看到当点击添加按钮后{name:'ww',age:20}能成功加入到数组中并在页面中渲染出来。接下来我们再演示一下在每个li中的input中输入对应的姓名后再点击添加按钮。

发现点击添加按钮后原本属于ww的空白输入框却到了ls后面，这明显不符合我们的需求。要如何才能避免这种情况产生呢？添加一个key

<body>
    <div id="app">
        <button @click='add'>添加</button>
        <h1>数组</h1>
        <ul>
            <li v-for="(i,j) in list" :key="i.id">{{i.name}}--{{i.age}}<input type="text"></li>
        </ul>
​
    </div>
    <ul id="list">
​
    </ul>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            list: [
                {id:'001', name: 'zs', age: 18 },
                {id:'002', name: 'ls', age: 19 }
            ],
        },
        methods: {
            add() {
                this.list.unshift({id:'003', name: 'ww', age: 20 })
            }
        }
    })
​
</script>

这个代码对list中的数据进行了重构，在每组对象中都添加了一个id值用来作为key要绑定的值，页面呈现的结果正是我们所想要的。为什么加个key后就会使之前的问题迎刃而解呢？接下来我们就来具体看看key的作用。

key的作用

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】之后Vue会根据【新虚拟DOM】与【旧虚拟DOM】的差异比较

key对比规则

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

  2. 旧虚拟DOM中未找到与新虚拟DOM相同的key，这种情况下会创建新的真实DOM，随后渲染到页面上。

为什么不能用index作为key

  1. 如果对数据进行逆序添加、删除等破坏顺序的操作，会产生没有必要的真实DOM更新，界面效果没问题

  2. 如果结构中还包含输入（input）类的DOM,会产生错误DOM更新，会导致界面问题

如何选择key

  1. 最好使用每条数据唯一标识作为key如：id、身份证等

  2. 如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染列表用于展示则可以用index作为key

为什么没有绑定key时会出现这种问题呢？是因为如果没有设置key那么key默认为绑定为index，所以key值尽量不要设置为index

列表的过滤

实现如百度搜索中的关键字索引

  • 用watch实现

    <body>
    <div id="app">
        <input type="text" v-model='critical'>
        <ul>
            <li v-for="str in list">{{str}}</li>
        </ul>
​
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            critical: '',
            list: [],
            lists: ['i love you', 'hello', 'yes', 'no', 'english', 'error']
        },
        watch: {
            critical: {
                immediate: true,
                handler(val) {
                    this.list = this.lists.filter((str) => {
                        if (str.indexOf(val) !== -1) return true
                        else return false
                    })
                }
            }
        }
    })
​
</script>

  • 用computed实现

    <body>
    <div id="app">
        <input type="text" v-model='critical'>
        <ul>
            <li v-for="str in list">{{str}}</li>
        </ul>
​
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            critical: '',
            lists: ['i love you', 'hello', 'yes', 'no', 'english', 'error']
        },
        computed: {
            list() {
                return this.lists.filter((str) => {
                    if (str.indexOf(this.critical) !== -1) return true
                    else return false
                })
            }
        }
    })
​
</script>

过滤前

过滤后
​​​​

列表排序

<body>
    <div id="app">
        <input type="text" v-model='critical'>
        <button @click="sortType=1">降序</button>
        <button @click="sortType=2">升序</button>
        <button @click="sortType=0">原序</button>
        <ul>
            <li v-for="str in list">{{str.name}}--{{str.age}}</li>
        </ul>

    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            critical: '',
            sortType: 0,
            lists: [{ 'name': 'zs', 'age': 12 }, { 'name': 'ww', 'age': 13 }, { 'name': 'ls', 'age': 2 }, { 'name': 'lily', 'age': 5 }]
        },
        computed: {
            list() {
                let arr = this.lists.filter((str) => {
                    if (str.name.indexOf(this.critical) !== -1) return true
                    else return false
                })
                if (this.sortType) {
                    arr.sort((a, b) => {
                        return this.sortType === 1 ? a.age - b.age : b.age - a.age
                    })
                }
                return arr
            }
        }
    })

</script>
未排序前
降序排序

 

 

进阶的菜熊
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue里a标签从后台获取链接并实现跳转
qq_52959651的博客
12-06 3334
vue里a标签从后台获取链接并实现跳转 当我从data里写一个json时，页面渲染循环出json文件，链接可以实现跳转。 代码： <style> #app{ min-width: 1200px; margin: 0px 60px; } #app ul li{ display: inline-block; border: 1px s
vue根据后端数据，v-for渲染不同样式
qq_41613524的博客
08-09 1437
vue根据后端数据，v-for渲染不同样式 效果图 数据 [ { "Type": "1", "number": "大西几", "id": "1" }, { "Type": "3", "number": "小脑斧", "id": "1" }, { "Type": "2", "number": "严白虎", "id": "1" }, { "Type": "2", "number": "好的话", "id": "1" }, { "Type": "1", "number": "打碎u",
Vue v-for详细使用，四面楚歌的前端工程师该何去何从
最新发布
weixin_58134620的博客
04-01 981
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue-Vue列表渲染v-for
weixin_30915275的博客
02-27 110
　　v-for 指令需要以 site in sites 形式的特殊语法 一、v-for 循环数组 HTML代码 <div id="app"> <ul> <li v-for='item in list'>{{item}}</li> </ul> </div> JS...
列表循环渲染
m0_52544128的博客
02-25 278
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 11</title> <script src="https://unpkg.com/vue@n
Vue中列表循环渲染
qq_52207728的博客
06-02 1480
栗子： <!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&gt
vue (v-for)
m0_73495603的博客
09-22 371
v-for的遍历
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
本文将详细介绍如何在Vue中处理这种情况，并提供相关知识点。 1. **`v-on:input` 事件监听器** - `v-on:input` 是Vue中用来监听元素`input`事件的指令，当用户在输入框中输入内容时，`input`事件会被触发。在HTML...
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
10-14
在Vue.js中，`v-for`指令用于循环渲染列表数据，而通过添加点击事件，我们可以实现用户交互，例如点击某一行获取该行的数据。本文将详细介绍如何在Vue中使用`v-for`结合点击事件来获取当前行的数据以及事件对象。 ...
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
10-15
在Vue.js中，`v-for`指令用于循环渲染列表数据，而实现点击列表项（li）使其字体变红，可以通过动态绑定CSS类来实现。在这个示例中，我们看到一个包含多个li元素的列表，每个li元素对应于`lists`数组中的一个对象。...
Vue如何获取数据列表展示
10-15
总结，Vue如何获取数据列表展示涉及到的主要知识点包括：数据绑定、列表渲染、组件化、异步数据获取、过滤器、生命周期钩子、以及事件处理等。掌握这些核心概念，将有助于你构建功能丰富的单页应用程序。
自学vue过程中的一些基础知识点
06-20
11. **`v-for`**：基于数组或对象进行列表渲染，通过`key`属性帮助Vue跟踪每个节点的身份，提高性能。 12. **事件修饰符**：`.stop`阻止事件冒泡，`.prevent`阻止默认行为，还有其他如`.capture`、`.self`等。 13....
Vue(三)：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
weixin_51000853的博客
09-04 645
方法来排序，计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了。（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的，不写的时候默认index作为key。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
[Vue] 10.Vue的列表循环渲染 v-for
u014627255的博客
05-30 722
使用v-for渲染list中的内容 <!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"> .
Vue列表渲染指令v-for的使用
weixin_48842132的博客
01-13 510
浅谈Vue列表渲染指令v-for的使用
Vue列表渲染(v-for的使用)
见证自己学习,成长的记录
03-28 2805
v-for指令1.用于展示列表数据2 语法 v-for=(item,index) in(of) xxx :key=“yyy”3 可遍历：数组(用的多)，对象(用的多)，字符串(用的少)，指定次数(用的少)代码奉上DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 初始vue < / title >
【vue源码】深度理解v-for
weixin_34055787的博客
05-06 1334
最近在阅读element源码的，但是element内部有很多this._l方法，element源码里面也找不到，查了一下，原来是vue的内部渲染列表的方法 源码位置，代码不长，可以一读 三个工具函数 isDef isDef是isDefined的缩写，反过来就是isUndefined，反正就是看它是不是undefined function isDef (v) { return v !== und...
vue列表渲染
hubertbb3的博客
09-01 306
Vue中的列表渲染 vue中可以使用v-for的方式实现对列表或者多个数据的渲染。如： <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> <ul> <li v-for="(item,index) in items" :key="item.id"> {{ item.message }} </li> </ul&gt
Vue---v-for渲染和样式绑定
weixin_53027472的博客
09-25 783
Vue---v-for渲染和样式绑定
使用vue尝试使用v-model、v-if与v-for的知识，制作一个简易贴吧。有普通用户和管理员两种角色，普通用户可以发帖、收藏帖子；管理员可以发帖、置顶帖子。请问该怎么实现
04-22
感谢您的提问。根据您的需求，我可以给出以下一般性建议： 1. 首先确定需要用到哪些组件和页面。对于一个简易贴吧，可能需要创建帖子列表页面、帖子详情页面、用户个人主页等页面，采用一些常用的组件如卡片、表单、按钮等。 2. 通过v-model指令来实现数据的双向绑定。可以将用户输入的信息（如用户名、密码、帖子标题、内容等）与data对象中的属性进行绑定，从而实现数据的交互。 3. 使用v-if指令来控制页面的显示与隐藏。这个指令可以根据某个变量的值来决定页面中某个区块是否显示，比如根据用户是否登录来显示相应的功能按钮。 4. 使用v-for指令来渲染数据列表。这个指令可以根据data中的数组来生成一系列列表项，比如输入帖子标题关键字时，匹配帖子标题中含有关键字的帖子并展示到页面。 5. 针对普通用户和管理员两种角色的权限，可以通过vuex或者sessionStorage来保存用户信息和权限等级，然后在程序中根据不同权限等级对功能进行限制。 希望以上建议可以帮助您实现自己的简易贴吧。如果您有更具体的问题或者需要更深入的解释，可以再向我提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

进阶的菜熊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值