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. 关于SQL SERVER 字段类型char(n) , nchar(n) , varchar(n) , nvarchar(n)

    对于很多新手来说,经常被字段类型搞得晕头转向,今天我用通俗易懂的解释帮大家理解这些类型. 在数据库字段类型定义中,可以分为两大类,一类为Unicode类型,另一种就是非Unicode. Unicode ...

  2. CF1799B Equalize by Divide题解

    本蒟蒻学习了jiangly大佬的思想,来发一个题解. 大致题意: 给定一个 \(n\) 个元素的数组 \(a\),每次可以选择 \(a[i]\) 和 \(a[j]\),然后使 \(a[i] = \lc ...

  3. 利用java来实现计算器的加减乘除

    package bag; import java.util.Scanner; public class Demo06 { public static void main(String[] args) ...

  4. 大语言模型中一个调皮的EOS token

    背景 最近需要做一个微调的培训,所以不可避免地需要上手一下相关的微调,而受限于机器资源,暂时没法做全参数微调,所以就尝试了目前比较火的两种高效微调方式,分别是PTuning和LoRA.模型选择得自然是 ...

  5. 飞桨paddlespeech语音唤醒推理C定点实现

    前面的文章(飞桨paddlespeech语音唤醒推理C浮点实现)讲了飞桨paddlespeech语音唤醒推理的C浮点实现.但是嵌入式设备通常CPU频率低和memory小,在嵌入式设备上要想流畅的运行语 ...

  6. centOS7 磁盘扩容（2T以上）

    centOS7 磁盘扩容 1.安装parted分区工具 yum install -y parted 2.查看服务器分区情况 #fdisk -l 或者 lsblk 找到新增磁盘名称 例如/dev/sdb ...

  7. 2021-7-6 VUE笔记

    v-cloak:使用的display:none: 直到编译完成后开始显示: v-text和插值表达式,非必要响应式用v-text会比较好,使用插值表达式要加上v-cloak; v-html:不推荐使用 ...

  8. excel:if语句

    IF语法格式: IF(logical_test,value_if_true,value_if_false) 释义:判断一个条件是否满足,如果满足返回一个值,如果不满足则返回另一个值. logical_ ...

  9. Nginx反向代理服务流式输出设置

    Nginx反向代理服务流式输出设置 1.问题场景 提问:为什么我部署的服务没有流式响应 最近在重构原有的GPT项目时,遇到gpt回答速度很慢的现象.在使用流式输出的接口时,接口响应速度居然还是达到了3 ...

  10. SDP协议理解

    目录 SDP协议 协议格式说明 协议格式 常见属性 协议版本号 v= -- Protocol Version 会话发起者: o= -- Origin 会话名 s= 连接数据:c= 媒体描述:m= 附加 ...