Vue中for循环的用法总结如下：

1.基本用法 v-for

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    arr:['apple','banana','orange','pear']

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <ul>

            <li v-for="value in arr">

                {{value}}

            </li>

        </ul>

    </div>

</body>

</html>

结果：

2.带索引的用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    arr:['apple','banana','orange','pear']

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <ul>

            <li v-for="value in arr">

                {{value}}   {{$index}}

            </li>

        </ul>

    </div>

</body>

</html>

描述：

使用{{$index}}可以提供索引

结果：

3.使用(k,y) in arr

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    arr:['apple','banana','orange','pear'],

                    json:{a:'apple',b:'banana',c:'orange'}

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <ul>

            <li v-for="value in arr">

                {{value}}   {{$index}}

            </li>

        </ul>

        <hr>

        <ul>

            <li v-for="value in json">

                {{value}}   {{$index}}  {{$key}}

            </li>

        </ul>  

        <hr>

        <ul>

            <li v-for="(k,v) in json">

                {{k}}   {{v}}   {{$index}}  {{$key}}

            </li>

        </ul>

    </div>

</body>

</html>

描述：

{{k,v}} in arr         k代表key,  v代表value

结果：

Vue之for循环的更多相关文章

  1. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

  2. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  3. Vue中的循环以及修改差值表达式

    0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...

  4. vue标签内循环数据逗号分隔

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 最好用的 vue v-for直接循环案例

    vue v-for直接循环数字,也就是固定次数 项目中需要做一个酒店星级,酒店星级就是固定的5星,根据后台返回的数据来显示几星级 <!--星级,循环固定次数 5次 根据酒店等级显示亮的星星和灰色 ...

  6. vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...

  7. Vue.js：循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

  8. vue中动态循环model

    vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...

  9. 12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式

    功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <! ...

  10. vue的v-for循环普通数组、对象数组、对象、数字

    如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

随机推荐

  1. .net 温故知新【12】：Asp.Net Core WebAPI 中的Rest风格

    RPC RPC(Remote Procedure Call),远程过程调用),这种RPC形式的API组织形态是类和方法的形式.所以API的请求往往是一个动词用来标识接口的意思,比如 https://x ...

  2. Rust 学习笔记：快速上手篇

    Rust 学习笔记:快速上手篇 这篇学习笔记将用于记录本人在快速上手 Rust 编程语言时所记录的学习心得与代码实例.为此,我会在本笔记库项目的Programming/LanguageStudy/目录 ...

  3. Unity UGUI的RawImage（原始图片）组件的介绍及使用

    Unity UGUI的RawImage(原始图片)组件的介绍及使用 1. 什么是RawImage组件? RawImage是Unity UGUI中的一个组件,用于显示原始图片.与Image组件不同,Ra ...

  4. 在虚拟机VMware上安装OpenKylin开源操作系统

    在虚拟机(VMware)上安装OpenKylin开源操作系统 今天我们一下学习下开放麒麟系统的安装.也是我的开源项目在OpenKylin上运行的实践. 希望通过该项目了解和学习Avalonia开发的朋 ...

  5. ls 和 du显示文件大小不一样

    查看当前文件系统的磁盘使用 df -k / Filesystem 1K-blocks Used Available Use% Mounted on /dev/nvme0n1p2 97844508 37 ...

  6. 看element源码学到的小技巧

    中午无休的时候有点无聊, 看了一下昨天clone 的 element-ui 源码, 发现很多优雅之处, 记录一下让我直接用到项目中的一个点 那就是绝对定位的元素放到body 里面的 同级.这么做的好处 ...

  7. asp.net core之Options

    本文将介绍 ASP.NET Core 中的 Options 概念和使用方法.Options 是一种配置管理机制,可以将应用程序的配置信息从代码中分离出来,提高代码的可维护性和可测试性.我们将详细介绍如 ...

  8. 你知道ES6中的这些属性吗

    ES6,也称ESMAScript2015,这个版本增加了很多好用的特性 变量声明 ES6之前用var来定义变量,ES6增加了两个变量声明的方式,分别为const和let,const用来定义常量,let ...

  9. Cilium系列-15-7层网络CiliumNetworkPolicy简介

    系列文章 Cilium 系列文章 前言 今天我们进入 Cilium 安全相关主题, 介绍 CiliumNetworkPolicies 相比于 Kubernetes 网络策略最大的不同: 7 层网络策略 ...

  10. 《深入理解Java虚拟机》笔记：垃圾收集算法和HotSpot的算法实现

    一.垃圾收集算法 由于垃圾收集算法的实现涉及大量的程序细节,而且各个平台的虚拟机操作内存的方法又各不相同,因此本节不打算过多地讨论算法的实现,只是介绍几种算法的思想及其发展过程. 垃圾收集算法概要 1 ...