Vue列表展示（循环显示）

最新推荐文章于 2024-08-15 13:48:12 发布
最新推荐文章于 2024-08-15 13:48:12 发布
阅读量3.6k 收藏 1
点赞数 2
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44635198/article/details/113442152
版权
  • 现在，我们来展示一个更加复杂的数据：数据列表。
    • 比如我们现在从服务器请求过来一个列表
    • 希望展示到HTML中。
  • HTML代码中，使用v-for指令
  • 更重要的是，它还是响应式的。
    当我们数组中的数据发生改变时，界面会自动改变。
    依然让我们打开开发者模式的console，来试一下

效果展示

响应式的展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{movies}}
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊！',
                movies:['星际穿越','大话西游','少年派','盗梦空间']
            }
        })

    </script>
</body>
</html>
lzh~
关注
专栏目录
vue踩坑之：v-for和v-if造成重复循环展示
xiaoyuer_2020的博客
12-31 4370
遇到的问题：接口只返回了一组数据，但是在页面展示时却出现了重复渲染，展示了两组商品。代码如下： <div v-if="type == 1" v-for="(item, index) in productList" :key="index">预售：{{item.name}}</div> <div v-else v-for="(item, index) in productList" :key="index">普通商品：{{item.name}}</div> .
Vue：关于列表循环
qq_41096610的博客
11-03 1153
列表渲染v-for v-for用于列表显示的指令，可遍历数组和对象。 遍历数组：v-for/index 遍历对象：v-for/key <div id="app"> <h2>v-for遍历数组</h2> <!--v-for/index--> <ul> <li v-for="(item,index) in persons" :key="index">
Vue3列表（List）
最新发布
Mr Dear的博客
08-15 1099
通用列表，支持：是否显示分割线；是否显示边框；三种尺寸；加载中；暂无数据；显示悬浮样式；列表添加操作项；自定义样式；竖排分页列表；总之；功能丰富，简单易用😁😁
3.Vue列表展示
eyes++的博客
05-09 292
<!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>Do
02-Vue列表展示
qq_44409163的博客
05-06 227
<!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>Document&lt
[Vue] 3.数据的循环展示 + todoList功能
u014627255的博客
05-24 1161
一、数据的循环展示 定义data中的数据 data() { return { list: ['hello', 'world', 'adam', 'xin'] } }, 循环数据：v-for template: ` <ul> <li v-for="(item, index) of list">{
vue——列表循环
weixin_54362381的博客
08-21 6219
Vue中的列表渲染 官网文档： https://cn.vuejs.org/v2/guide/list.html. 一、数组循环: 1、v-for中的in和of是一样的效果，二者都可以遍历数组和对象.建议使用v-for-of 更接近迭代器的语法. 2、(item,index) of list中的index代表下表标 3、:key="item.id中key值(唯一的)推荐使用item.id,为了提升性能(尽量别用index做key值) 4、修改数组内容的时候,不能直接通过修改index(list[下标])来修改
vue2.0 可折叠列表 v-for循环展示的实例
10-18
在这个实例中，我们将探讨如何使用`v-for`循环来遍历数据并展示列表，以及如何通过点击事件控制列表的展开和折叠。下面我们将详细分析这个实例中的关键点。 1. **`v-for`循环**： `v-for`是Vue中的一个指令，用于...
vue实现点击按钮“查看详情”弹窗展示详情列表操作
12-28
html： 详情： styles={top:> <Table class=task-table columns=columnsName4 data=taskDetailList></Table> ()>点击弹窗按钮 js： [removed] import http from
vue实现循环切换动画
10-17
在Vue.js框架中，实现循环切换动画是一个常见的需求，特别是在实现类似轮播图、页面过渡效果等场景时，我们需要动画能够在指定元素之间循环流动，使用户体验更加平滑和富有吸引力。接下来，我们将详细介绍在Vue中...
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
在Vue.js中，v-for是一个非常...这里强调了在Vue中如何灵活运用v-for、v-bind:class以及v-if指令，以实现复杂的列表布局和元素显示逻辑。通过理解和应用这些知识点，开发者可以更加高效地构建Vue应用程序的用户界面。
Vue如何获取数据列表展示
12-13
这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。 一、展示 二、源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document
Vue 常用指令 v-for 标签循环展示数据
小楼一夜听春雨，深巷明朝卖杏花
07-27 3555
如果数组的每一项不是数字，而是对象或者其他复杂的类型，那么item代表这个对象，要获取内部的值要结合.语法。v-for还有个特点，比如数组的长度发生变化了，比如添加了或者删除了，那么生成的列表也会发生改变。item的值是可以使用的，item的值可以结合其他指令，比如使用v-bind和v-on指令。v-for指令的作用是将作为模板的那个标签，还有内部的内容，根据循环的次数拷贝若干份。至于是什么样的列表，就看你指令使用的位置了，列表的生成依赖于数据，所以先去定义数据。item和index都是可以修改其名称的。
Vue - 简单的列表展示实现
iotjin的专栏
04-20 2073
<template> <div class="Message"> <TabBar :title="title" :can-back="false"/> <div class="cell-bg"> <!-- <div v-for="item in dataArr" :key="item.id" v-on:click="onclick(item)">--> <div v-for="item i
key的原理（vue）
qq_52135740的博客
07-27 634
面试题：vue中的key有什么作用？（key的内部原理） 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到
Vue列表的展示
vfjcgg的博客
06-03 799
Vue列表的展示 栗子中使用了v-for指令 栗子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> &
Vue列表展示
阿牛哥的博客
01-09 773
<!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>Doc
通用vue组件化展示列表数据
qq_55928824的博客
01-08 8369
通用vue组件化展示列表数据
VUE移动端列表筛选实战教程
本文档详细介绍了如何利用 Vue 实现列表筛选功能，以便在 vant 框架搭建的 webapp 中提供一个灵活且易用的筛选体验。作者分享了他们在遇到官方组件未能满足需求时，自定义开发列表筛选组件的过程。 首先，HTML部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

lzh~

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

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

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

打赏作者

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

抵扣说明：

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

余额充值