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. fidder中勾选check for certificate revocations导致手机无法连上fidder服务器

    在测试过程中因为要获取一个小程序登录API,就用手机设置代理后抓取,在抓取过程中发现提示用户名密码错误(未使用代理正常登录) 遂逐步查找,在与别人核对tools-option发现自己https页签中勾 ...

  2. Vmware安装Deepin20

    一.搭建环境 虚拟机:Vmware Workstation pro 17 Windows版本 镜像:Deepin 20 二.创建虚拟机 1.点击创建新的虚拟机,选择典型 2.选择稍后安装 3.选择li ...

  3. 深入JS——理解闭包可以看作是某种意义上的重生

    JS中有一个非常重要但又难以完全掌握的概念,那就是闭包.很多JS程序员自以为已经掌握了闭包,但实质上是一知半解,就像"JS中万物皆为对象"这个常见的错误说法一样,很多前端开发者到现 ...

  4. JMeter脚本报错：Cannot find engine named: 'javascript'的解决方法

    本文将介绍如何解决在JMeter版本5.4.1下执行脚本时出现的错误信息"javax.script.ScriptException: Cannot find engine named: 'j ...

  5. CentOS 7相关操作

    防火墙操作 开启防火墙 sudo systemctl start firewalld.service 查看防火墙状态 sudo systemctl status firewalld.service 关 ...

  6. 用极限网关实现 ES 容灾，简单！

    身为 IT 人士,大伙身边的各种系统肯定不少吧.系统虽多,但最最最重要的那套.那几套,大伙肯定是捧在手心,关怀备至.如此重要的系统,万一发生故障了且短期无法恢复,该如何保障业务持续运行? 有过这方面思 ...

  7. MAUI Blazor Android 输入框软键盘遮挡问题

    前言 最近才发现MAUI Blazor Android存在输入框软键盘遮挡这个问题,搜索了一番,原来这是安卓webview一个由来已久的问题,还好有大佬提出了解决方案 AndroidBug5497Wo ...

  8. ubuntu 终端选中黏贴、自带截图

    鼠标选中 -- 复制 鼠标中键 -- 粘贴 注意,在tmux中,这个操作需要加上 Shift 键. PrtSc:截图整个桌面保存到Pictures Ctrl + PrtSc:截图整个桌面到剪贴板 Sh ...

  9. WPF自定义标题栏

    往往原有的标题栏无法满足需求,此时就需要进行自定义标题栏. 重新定义Window的Template 首先,需修改WindowChrome的几个属性 CaptionHeight属性值就是自定义标题栏的高 ...

  10. FreeSWITCH添加自定义endpoint之媒体交互

    操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9   之前写过FreeSWITCH添加自定义endpoint的文章: https://www.cnblogs.com/ ...