vue入门（2）：v-for的使用：

最新推荐文章于 2024-04-07 18:21:52 发布
最新推荐文章于 2024-04-07 18:21:52 发布
阅读量462 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinglis/article/details/106466834
版权

vue入门（2）：v-for的使用：

一、v-for循环普通数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
话不多说，直接上“才艺”

<!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>控制台</title>
    <script src="./lib//vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
       
        <p v-for="(item,i) in list">索引值：{{i}}---每一项：{{ item }}</p>
    </div>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                list: [1,2,3,4,5,6,7,8,9,0],
                
            },
            methods: {

            }
        })
    </script>
</body>

</html>

在这里插入图片描述

二、v-for循环对象数组

上代码：

<!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>控制台</title>
    <script src="./lib//vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
       
        <p v-for="(item,i) in list">索引值：{{i}}---id:{{item.id}}---name：{{ item.name }}</p>
    </div>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                list: [
                    {id:1 ,name:'zs1'},
                    {id:2 ,name:'zs2'},
                    {id:3 ,name:'zs3'},
                    {id:4 ,name:'zs4'}
                ]
            },
            methods: {

            }
        })
    </script>
</body>

</html>

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

三、v-for循环对象

上代码：

<!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">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>控制台</title>
    <script src="./lib//vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
       
        <p v-for="(val,key,i) in list">索引值：{{i}}---值是:{{val}}---键是：{{ key }}</p>
    </div>
    <script type="text/javascript" src="./layui/layui.all.js"></script>

    <script>

        var app = new Vue({
            el: '#app',
            data: {
                list: {
                    id:1,
                    name: 'zs1',
                    age :18,
                    gender:'男'
                }
                
            },
            methods: {

            }
        })
    </script>
</body>

</html>

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

四、v-for迭代数字

上代码：

<!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">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>控制台</title>
    <script src="./lib//vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
       
        <p v-for="conter in 10">这是第{{ conter }}次循环</p>
    </div>
    <script type="text/javascript" src="./layui/layui.all.js"></script>

    <script>

        var app = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {

            }
        })
    </script>
</body>

</html>;

上图：在这里插入图片描述
注意！！！ 使用这种方法的话，conter是从1开始的。

五、key值的使用

这边就是简单说一下：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

最常见的用例是结合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

完整地触发组件的生命周期钩子
触发过渡
例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时， 总是会被替换而不是被修改，因此会触发过渡。

vue官网链接: https://cn.vuejs.org/.

爱发呆的程序员
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue学习——v-for
meicx_bupt的博客
06-05 422
数组迭代 对象迭代 整数迭代 用于组件 key 数据更新检测 过滤和排序
vue使用之v-for
前端李小白的博客
10-18 487
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它...
Vue指令之v-for的使用
m0_62404884的博客
06-05 4895
目录1.v-for循环普通数组2.v-for循环对象数组3.v-for循环对象中的属性 4.v-for循环数字 v-for="(item,i) in list"示例：在vue实例的data中增加一个数组循环数据结果v-for="(item,i) in userList"示例在vue实例的data中增加一个数组循环数组对象结果v-for="(val,key,i) in userList[0]"示例结果注意： 在遍历对象身上的键值对时，除了有 val key 键值对，在第三个位置还有一个索引v-for=“i i
vue2 v-for用法
Sirow的博客
12-28 606
【代码】vue2 v-for用法。
Vue v-for详细使用，四面楚歌的前端工程师该何去何从
weixin_58134620的博客
04-01 1459
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue2中v-for的使用
2201_75918981的博客
03-23 521
语法：v-for="(item,index) in 数组名"vue2中v-for主要是用来遍历和通过数据多次渲染页面。
Vue v-for详细使用
最新发布
2301_76379462的博客
04-07 496
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
Vue入门：（v-for v-model）
Continue的博客
11-11 1089
v-for 当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用。 例如 <li v-for="(item,index) in list" > 这里list是数组名，item为遍历的对象，index对应其下标 v-model 用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。 <input type="text" placeholder="请输入任务" v-model="notec
VUE:v-for的使用及源码
weixin_42733155的博客
11-29 1365
一、前言 v-for可以说是vue中使用最多的指令之一，不过，你真的了解它吗？v-for不仅仅能用于遍历数组，也不仅仅能用于遍历对象。 二、使用 先说结论：v-for可以遍历数组、对象、数字以及字符串，以及，在vue3版本新增的对于部署了iterator接口的对象的支持。下面是各种场景的分析，以(item,index) in obj的使用方式为例： <div v-for="(item,index) in obj"></div> 1.遍历数组 遍历数组时，item是.
Curso-Vue.js：Curso-Vue.js desde Cero
02-18
5. **指令系统**：Vue.js 提供了一系列内置指令，如`v-if`、`v-for`、`v-bind`和`v-on`等，用于增强HTML模板，实现条件渲染、循环、属性绑定和事件处理等功能。 6. **插槽系统**：Vue.js 的插槽允许组件之间共享内容...
Vue常用指令：v-text、v-html、v-model、v-for、v-if、v-else、v-show、v-bind、v-bind:class、computed、watch、console
QAQ
02-17 3574
一.指令 什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。 二、v-text和v-html 使用v-text和v-html指令来替代 {{}} 说明： v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出 v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染vue_day1/03_v-textandv-html.html： <!DOCTYPE html> <ht
vue的常用指令【v-bind v-for v-on v-model 自定义指令】
weixin_46336091的博客
11-16 761
除了用内置的指令完成vue工作需要后，还可以根据vue提供的方案完成自定义指令自定义指令：操作domdom对象.style.color='red'自定义指令它提供了5个钩子函数，它可以帮我们实现所需要的各种业务场景el 当前绑定到指令元素的dom对象,bindings 修饰符和传入的值bind 第一次绑定到元素时调用inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update 数据更新时调用。
Vue v-for的三种用法
热门推荐
camille009的博客
08-25 2万+
v-for的三种使用方法分别是： 1.使用v-for循环数组 <p v-for="(item,i) in list1" :key="i">索引值：{{i}}：id：{{item.userid}} 姓名：{{item.username}} 2.使用v-for循环对象 <p v-for="(val,key,i) in list2" :key="i">id：{{val}},name:{{key}},index:{{i}}</p> 3.v-for循环一个迭代的数字 <p
VUE 2.0——v-for使用
专注写bug
06-28 830
在界面数据显示中，通常会有列表分页显示数据信息。此时针对的使用尤为重要。设定数据显示集合信息，并在页面中遍历显示集合中的所有数据信息。 效果展示
vue2 v-for ,虚拟dom ，diff算法，动态class，动态style
Cxil的博客
11-24 1647
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
vue2之v-for详解
amyleeYMY的博客
12-10 8508
了解vue的应该都知道v-for指令是用来遍历 数组、对象的，但是vue居然还能遍历整数！！！第一眼看到遍历v-for整数的代码我觉得是写错了。。。好吧，是我太菜了。接下来我们一起来看看。 （1）遍历数组 &lt;ul id="example-1"&gt; &lt;li v-for="(item, index) in items" :key="index"&gt; {{ item...
Vue2循环列表v-for
骆小洛
11-06 2034
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个。，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。变更方法，顾名思义，会变更调用了这些方法的原始数组。
v-for=“item in arr“ 的理解
qingdouxiaohua的博客
03-23 253
是一个指令，用于在模板中渲染一个列表的数据。就会是数组中的一个对象，然后你可以通过。数组中的每个对象，每次迭代时，来访问和显示该对象的。在 Vue.js 中，
vue框架中常用指令v-for等等
DYFNB的博客
08-09 253
v-for 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。下面是我的代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
Vue 3入门与v-for用法详解
本篇文章主要介绍了Vue 3的基本语法和关键特性，包括快速入门示例和`v-for`指令的使用。以下是对这些内容的详细解析。" **1. Vue的快速入门：** 在这个HTML模板中，我们首先看到了`<!DOCTYPE html>`声明，确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值