Vue系列之v-for循环结构
admin
2024-03-12 09:02:36
0次

文章の目录

  • 一、v-for循环数组
  • 二、v-for循环对象
  • 三、v-if与v-for一起使用
  • 写在最后

一、v-for循环数组

  • {{item}}
    •

    其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

    v-for 还支持一个可选的第二个参数，即当前项的索引。

  • {{item}}
    •

    你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

  • {{item}}
    •

    二、v-for循环对象

    用 v-for 来遍历一个对象的 property。

    一个参数是值

  • {{ value }}
    •

    也可以提供第二个的参数为 property 名称 (也就是键名)：

    两个参数时，第一个参数是值，第二个参数是属性名

    {{ name }}: {{ value }}

    还可以用第三个参数作为索引：

    三个参数时，第一个参数是值，第二个参数是属性名，第三个参数是索引

    {{ index }}. {{ name }}: {{ value }}

    在使用for循环的时候，最好给每个元素添加一个key，至于key有什么作用，请看这篇文章【Vue系列之v-for中key的作用】

    三、v-if与v-for一起使用

    注意我们不推荐在同一元素上使用 v-if 和 v-for。
    当它们处于同一节点，v-for 的优先级比 v-if 更高

    写在最后

    如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
    如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
    如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
    谢谢各位读者们啦(^_^)∠※！！！

    词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

    上一篇：英超-切尔西3-2纽卡4轮不败 帕尔默传射斯特林失单刀杰克逊破门 英超切尔西3-0热刺保持赛季不败 英超切尔西2-2利物浦集锦

    下一篇：埃德森零封奖又没了哥本哈根反击破门，扳回一球 埃德森进球 埃德森零封奖金有多少

    相关内容

    热门资讯

    linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
    C++ 机房预约系统（六）：学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤： 在Student.cpp的...
    A.机器学习入门算法（三）：基... 机器学习算法（三）：K近邻(k-nearest neigh...
    数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
    有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数（Nÿ...
    Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库，支持多种数据结构。以下是...
    win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
    MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
    keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
    MATLAB | 全网最详细网... 一篇超超超长，超超超全面网络图绘制教程，本篇基本能讲清楚所有绘制要点&#...
    IHome主页 - 让你的浏览... 随着互联网的发展，人们越来越离不开浏览器了。每天上班、学习、娱乐，浏览器...
    TCP 协议 一、TCP 协议概念 TCP即传输控制协议（Transmission Control ...
    营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目，是进行公司注册...
    C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题： 无法知道当前使用的类型是什...
    血压计语音芯片，电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计，测量前至测量结果全程语音播报࿰...
    MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
    【2023-Pytorch-检... （肆十二想说的一些话）Yolo这个系列我们已经更新了大概一年的时间，现在基本的流程也走走通了，包含数...
    实战项目：保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
    记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前段时间接触了Th...
    43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...