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. 【序列化与反序列化】关于序列化与反序列化MessagePack的实践

    在进行序列化操作之前,我们还对系统进行压测,通过jvisualvm分析cpu,线程,垃圾回收情况等:运用火焰图async-profiler分析系统性能,找出程序中占用CPU资源时间最长的代码块. 代码 ...

  2. smarty 拼接字符串

    smarty 拼接字符串 newstr = [oldstr]|cat:[appendstr] 1 {$name = "Tom"} 2 {$phone = "1381234 ...

  3. CF1728A Colored Balls: Revisited题解

    去我的Blog观看 修改时间:2022/9/11修改了格式与标点 修改时间:2022/9/13修改了个别不严谨的语句 题目大意 有 \(n\) 种颜色的球,颜色为 \(i\) 的球为 \(cnt_i\ ...

  4. 即构SDK8月迭代：新增下行网络测速、切换房间、预览首帧回调等多项功能

    即构SDK8月上新,网络探测模块新增下行网络测速.媒体播放器新增缓存到文件结尾的回调.新增切换房间功能.新增预览首帧回调等.本月SDK迭代新上线的功能非常丰富,详细内容请看下文. LiveRoom 新 ...

  5. Hexo博客Next主题bilibili视频Markdown插入文章

    问题及需求 B站视频无广告有弹幕,非常简洁,经常看B站视频,在文章引用B站的视频 在不用插件的情况下用官方的iframe方式引入视频,默认的方式导入视频屏幕会很小 一般我们都是自己改width和hei ...

  6. DLL注入-Windows消息钩取

    0x01 钩子 钩子,英文Hook,泛指钓取所需东西而使用的一切工具.后来延伸为"偷看或截取信息时所用的手段或工具". 挂钩:为了偷看或截取来往信息而在中间设置岗哨的行为 钩取:偷 ...

  7. java发送http请求（jquery发送http请求，前后端看这一篇文章够了，很完整）

    为什么写这篇博客? 1.目前很多系统使用了微服务架构,那么各个微服务之间进行内部通信一般采用http协议的方式,springcloud中提供了ribbon,feign,openFeign等组件. 但是 ...

  8. Spring的Bean标签配置（一）

    Bean标签基本配置 由于配置对象交由Spring来创建 默认情况下它调用的的是类中的无参构造函数,如果没有无参构造函数则不会创建成功 id:唯一标识符号,反射是通过无参构造创建对象的. class: ...

  9. happens-before 原则

    happens-before 简述 从 JDK 5 开始,Java 使用新的 JSR-133 内存模型.JSR-133 使用 happens-before 的概念来阐述操作之间的内存可见性.在 JMM ...

  10. Linux基础—vmvare安装及centos7安装

    Linux基础 # https://zhuanlan.zhihu.com/p/429509333 # 一 什么是操作系统 Operating System(操作系统) 简称OS Windows,Mac ...