05v-for命令

2024-09-08 11:48
文章标签 命令 05v

本文主要是介绍05v-for命令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

划重点
  • 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>v-for指令的使用</title><script src="./lib/vue-2.6.10.js"></script>
</head><body><!-- v-for 直接修饰的是 对象 属性  --><div id="app"><!-- item 表示对应的 数组中的 (item) 单个的元素; in :表示是包含在哪个数组中;listShuZu:表示的是一个数组    
那么 v-for="item in listShuZu" 就可以理解为:通过for循环 把 数组listShuZu 中的每一个 item 元素对应的取出来扩展:这里只是 取的每一个元素;没有取下标的参数;下一个案例数组listObj对象可以取下标 或者item中的name / id 等信息。 
--><h3>"v-for 遍历数组"</h3><br><p v-for="item in listShuZu">{{ item }}</p><br><!--listObj是 对象的数组;这里的案例;里面有两个参数:item 和 index 
item: 表示数组中的 每一个子元素 如:第一个子元素是: { id: 1, name: 'zs1' }
index: 表示的是:item 对应的索引下标 ;如第一个元素的索引下标就是:0 
这样可以通过:item.id 获取到元素对应的id; 可以通过 item.name 获取到元素对应的名称 ;
注意:上面的 item  是定义的变量名称;可以直接用插值表达式使用:{{ item }};因为在JS中定义变量和 Java 中不是很一样;在Java 中必须定义了一个变量才能使用;但是在JS中有的时候可以直接使用变量:我们姑且认为这个变量默认是已经被定义的
--><h3>"v-for 遍历对象数组数组"</h3> <br><p v-for="(item , index ) in listObj" :key="item"> === 元素:{{ item }} 元素的名字:{{ item.name }} 索引下标:{{ index  }}</p><br><br><!-- v-for直接遍历了数字数组 
i:表示:数组的子元素
index:标示了索引的 下标
--><h3>"v-for 直接迭代 数字数组"</h3> <br><p v-for="(i,index) in 5"> === 元素:{{ i }} 索引下标:{{  index  }} </p><!-- 针对上面的 对 v-for的使用 总结几点:
1:如果 只有一个参数:那么获取的遍历结果就是该数组的子元素
如:v-for="item  in list "
2:如果 有两个参数:那么一般第一个参数是 子元素;第二个参数是 索引下标  ;;这个时候 是多个参数的需要用 小括号() 括起来。
如:v-for=(item , index ) in list”
--></div><script>var vm = new Vue({el: '#app',data: {listShuZu: [1, 2, 3, 4, 5, 6],listObj: [{ id: 1, name: 'zs1' },{ id: 1, name: 'zs1' },{ id: 1, name: 'zs1' }]},methods: {}})</script>
</body></html>
效果图:

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

这篇关于05v-for命令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1148024

相关文章

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

30常用 Maven 命令

Maven 是一个强大的项目管理和构建工具,它广泛用于 Java 项目的依赖管理、构建流程和插件集成。Maven 的命令行工具提供了大量的命令来帮助开发人员管理项目的生命周期、依赖和插件。以下是 常用 Maven 命令的使用场景及其详细解释。 1. mvn clean 使用场景:清理项目的生成目录,通常用于删除项目中自动生成的文件(如 target/ 目录)。共性规律:清理操作

利用命令模式构建高效的手游后端架构

在现代手游开发中,后端架构的设计对于支持高并发、快速迭代和复杂游戏逻辑至关重要。命令模式作为一种行为设计模式,可以有效地解耦请求的发起者与接收者,提升系统的可维护性和扩展性。本文将深入探讨如何利用命令模式构建一个强大且灵活的手游后端架构。 1. 命令模式的概念与优势 命令模式通过将请求封装为对象,使得请求的发起者和接收者之间的耦合度降低。这种模式的主要优势包括: 解耦请求发起者与处理者

linux 判断某个命令是否安装

linux 判断某个命令是否安装 if ! [ -x "$(command -v git)" ]; thenecho 'Error: git is not installed.' >&2exit 1fi

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚

Linux命令(4):fg与bg命令

fg、bg、jobs、&、ctrl + z都是跟系统任务有关的,虽然现在基本上不怎么需要用到这些命令,但学会了也是很实用的 一.& 最经常被用到 这个用在一个命令的最后,可以把这个命令放到后台执行 二.ctrl + z 可以将一个正在前台执行的命令放到后台,并且暂停 三.jobs 查看当前有多少在后台运行的命令 四.fg 将后台中的命令调至前台继续运行 如果后台中有多个命令,可以

Linux命令(3):sz与rz命令

一般来说,linux服务器大多是通过ssh客户端来进行远程的登陆和管理的,使用ssh登陆linux主机以后,如何能够快速的和本地机器进行文件的交互呢,也就是上传和下载文件到服务器和本地; 与ssh有关的两个命令可以提供很方便的操作: sz:将选定的文件发送(send)到本地机器 rz:运行该命令会弹出一个文件选择窗口,从本地选择文件上传到服务器(receive) rz,sz是便是Linux

Detectorn2预训练模型复现:数据准备、训练命令、日志分析与输出目录

Detectorn2预训练模型复现:数据准备、训练命令、日志分析与输出目录 在深度学习项目中,目标检测是一项重要的任务。本文将详细介绍如何使用Detectron2进行目标检测模型的复现训练,涵盖训练数据准备、训练命令、训练日志分析、训练指标以及训练输出目录的各个文件及其作用。特别地,我们将演示在训练过程中出现中断后,如何使用 resume 功能继续训练,并将我们复现的模型与Model Zoo中的

Linux命令(11):系统信息查看命令

系统 # uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看CPU信息# hostname # 查看计算机名# lspci -tv # 列出所有PCI设备# lsusb -tv

Android下执行linux命令

最近在开发过程中 使用了几个命令来对   手机的文件的权限进行修改;现在记录一下: 用到的方法: 1:判断是否有Root权限;  /**      * 判断当前手机是否有ROOT权限      * @return      */     public static boolean isRoot(){         boolean bool = false;         try{