v-for指令_v-for是什么指令-程序员宅基地

技术标签： Vue vue

1.遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  遍历的时候，没有使用索引值-->
  <ul>
      <li v-for="item in names">{
   {item}}</li>
  </ul>
  <!--  遍历的时候，使用索引值-->
  <ul>
    <li v-for="(item, index) in names">{
   {index+1}}.{
   {item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      
    el:'#app',
    data:{
      
      names: ['kobe','bill','why','james'],
    }
  })
</script>
</body>
</html>

2.遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.仅获取value-->
  <ul>
    <li v-for="value in info">{
   {value}}</li>
  </ul>
<!--  2.获取value和key-->
  <ul>
    <li v-for="(value,key) in info">{
   {value}}-{
   {key}}</li>
  </ul>
<!--  3.获取value,key和index-->
  <ul>
    <li v-for="(value,key,index) in info">{
   {value}}-{
   {key}}-{
   {index}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      
    el:'#app',
    data:{
      
      info: {
      
        name: 'Brandan Eich',
        age:60,
        height: 1.88
      },
    }
  })
</script>
</body>
</html>

3.官方推荐我们使用v-for指令的时候，给对应的元素或组件加上一个key属性

为什么？
如果我想在ABCDE序列中插一个F，如下
在这里插入图片描述
有key和没有key的对比如下：

不使用key，原来ACBDE的Dom其实没有变化，只是在最后增加一个Dom，将原来显示C的Dom显示的内容改为显示F，依次类推。这是为了尽量减少Dom的渲染操作，Vue会简单复用此处每个元素。
使用key，key给每一个结点作一个唯一标识，这样就不能简单复用原来的元素了，而是找到对应的位置插入新结点。

<ul>
    <li v-for="item in letters" :key="item">{
   {item}}</li>
  </ul>

key可以就用item本身来一一对应，不去用index

本文链接：https://blog.csdn.net/YINZHE__/article/details/116445695

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

十大移动开发平台_webbuilder是免费的吗-程序员宅基地

文章浏览阅读8.9k次，点赞2次，收藏7次。1. Putdb WebBuilder　　　　WebBuilder是一款开源的可视化移动Web应用开发和运行平台。基于浏览器的集成开发环境，可视化和智能化的设计，能轻松完成常规应用和面向手机的移动应用开发；高效、稳定和可扩展的特点，适合复杂企业级应用的运行；跨平台、数据库和浏览器的架构，适应复杂的服务器和客户端环境；包括智能数据库访问在内的多项先进技术，使应用系统的开发更快捷和简单。　..._webbuilder是免费的吗

RS485硬件标准1-电平定义_485端口正负电压-程序员宅基地

文章浏览阅读1.5k次。RS485标准是为了弥补RS232通信距离短、速率低等缺点而产生的而产生的，该接口标准只规定了电气特性，并没有规定接插件，传输电缆和应用层通信协议。RS485标准与RS232不一样，数据信号采用差分传输方式。所谓差分传输，就是发送端在两条信号线上传输幅值相等，相位相反的电信号，接收端对接收的两条线信号做减法运算，这样就获得幅值翻倍的信号。RS485上的两根线定义为A、..._485端口正负电压

centos mysql 端口,CentOS 上mysql端口3306的问题-程序员宅基地

文章浏览阅读200次。CentOS 上mysql端口3306的问题今天装了一台Linux系统，以前都是RedHat，后来听说有Fedora了，一直没用过。正好项目里环境要用就想弄一个来玩玩，结果现在人家最新的是CentOS，就一张CD，其他的根据需要自己上网Down，(我不喜欢这样子就自己下载DVD版)。安装完之后没有图形界面，而且没有提示输入root密码，还得到单用户模式下修改。后来下载了一个图形界面，弄好之后在那个..._centos修改mysql端口tcp6:3306为tcp

PXE自动化安装CentOS 8_centos8 pxe boot arp timeout-程序员宅基地

文章浏览阅读6.6k次，点赞5次，收藏26次。安装前准备：关闭防火墙和SELINUX，DHCP服务器静态IP。切勿用桥接模式最好是NET模式而且把自动分配DHCP对勾取消。查看防火墙和seelinux是否关闭[root@centos8 ~]#firewall-cmd --statenot running[root@centos8 ~]#getenforce Disabled安装对应的软件包安装syslinux的时候..._centos8 pxe boot arp timeout

R软件学习笔记-5（R软件画图）_箱尾图绘制函数用法-程序员宅基地

文章浏览阅读6.8k次，点赞4次，收藏32次。转自：http://www.dataguru.cn/article-2421-1.html摘要: 一、直方图绘制直方图函数：hist()对x1进行直方图分析 hist(x$x1)二、散点图散点图绘制函数：plot()探索各科成绩的关联关系 plot(x1,x2) plot(x$x1,x$x2)三、柱状图列联表分析列联函数table()：统计每个分数的人 ...一、直方图_箱尾图绘制函数用法

Redis常用命令-程序员宅基地

文章浏览阅读783次。http://www.4wei.cn/archives/1002509Redis常用命令集1）连接操作命令quit：关闭连接（connection）auth：简单密码认证help cmd：查看cmd帮助，例如：help quit2）持久化save：将数据同步保存到磁盘bgsave：将数据异步保存到磁盘lastsave：返回上次成功将数据保存到磁盘的Unix时戳shundo..._redis怎么使用vi

随便推点

谷歌地图控件，通过扩展实现GMAP的自定义绘图系统-程序员宅基地

文章浏览阅读251次。　　这两天搞网络规划和优化系统，需要开发一套地图，并在地图上放置自定义图标，和放置复杂贴图，或画矩形多边形等随着地图移动和放缩。这件事情一开始搞得很痛苦，通过GMAP.NET开发，并使用了CodeProject上面的drawtools工具（有兴趣可以自行搜索，博客园也有相关的文章讨论），但就是没法实现随地图移动而移动，仿佛是浮在地图上的。最后这种方法只能放弃。看了几个博客上面讨论的..._gmap tooltip 背景透明

[源码解析] 机器学习参数服务器ps-lite 之(3) ----- 代理人Customer-程序员宅基地

文章浏览阅读469次。本文是参数服务器第三篇，介绍ps-lite的Customer模块。

卷积神经网络笔记--吴恩达深度学习课程笔记（四）_卷积神经特征平面-程序员宅基地

文章浏览阅读2.8k次，点赞4次，收藏17次。各个知识点详解LeNet-5网络LetNet网络的的讲解主要参考1998年计算机科学家Yann LeCun发布的一篇论文《Gradient based learning applied to document-recognition》大家可以找到这篇论文结合学习，针对该网络，首先大家需要了解一下图像中的常用操作卷积，卷积这个词是信号处理领域的词，表示一个系统多数据处理的过程，在图像处理中的卷积，其实就是滤波器。下面先简要介绍一下卷积核的概念，这个不能细说，因为想要深入理解卷积需要很多知识，这里只给大家_卷积神经特征平面

ANSYS无限大平板两边传热仿真_ansys热仿真-程序员宅基地

文章浏览阅读5.1k次，点赞4次，收藏20次。ANSYS无限大平板两边传热仿真有一无限大平板，导热系数为27.56，密度为591.8，密度为7800，厚度为1.08m，现将其划分为4层，5个温度节点，求分析其在两面不相等且温度变化的对流换热中的受热情况。对流换热系数为200。一、前处理器1、建立工程，改变工程名称2、选择处理热问题，勾选Thermal选项3、选择需要划分的节点类型，这里采用55节点若计算对称问题，则在o..._ansys热仿真

SpringBoot使用prometheus监控_spring security 只开启/actuator/promethues断点-程序员宅基地

文章浏览阅读3.1w次，点赞2次，收藏40次。本文介绍SpringBoot如何使用Prometheus配合Grafana监控。1.关于PrometheusPrometheus是一个根据应用的metrics来进行监控的开源工具。相信很多工程都在使用它来进行监控，有关详细介绍可以查看官网：https://prometheus.io/docs/introduction/overview/。2.有关GrafanaGrafana是一个开源监..._spring security 只开启/actuator/promethues断点

Redis数据结构_redis取值fet list-程序员宅基地

文章浏览阅读99次。redis是一种高级的key-value数据库存储系统其中value值支持物种数据类型，key的数据类型一般都是String字符串类型：String散列类型：hash列表类型：list集合类型：set有序集合类型：sorted set对于redis的key值，如果定义的名称过长，查询效率就会降低，所以一般是按照规范命名就可以了。命令ping 就是连接是否成功显示PONG就表示连接成功redis默认会在空间之中生成16个数据库，数据库编号以此从.._redis取值fet list