<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 循环普通数组 -->

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

    --------------------

    <!-- 循环对象数组 -->

    <p v-for="(user, i) in list1">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>

    --------------------

    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->

    <p v-for="(val, key, i) in user">键是： {{ key }} --- 值是： {{ val }} -- 索引： {{ i   }}</p>

    --------------------

    <!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 -->

    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->

    <p v-for="count in 10">这是第 {{ count }} 次循环</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        list: [1, 2, 3, 4, 5, 6],

        list1: [{

            id: 1,

            name: 'zs1'

          },

          {

            id: 2,

            name: 'zs2'

          },

          {

            id: 3,

            name: 'zs3'

          },

          {

            id: 4,

            name: 'zs4'

          }

        ],

        user: {

          id: 1,

          name: '托尼·屎大颗',

          gender: '男'

        }

      },

      methods: {}

    });

  </script>

</body>

</html>

vue v-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+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

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

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

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

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

  8. Vue.js：循环语句

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

  9. vue中动态循环model

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

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

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

随机推荐

  1. Mac 电脑如何卸载 node

    因为刚入手「 Mac 」很多淫技还不懂,在一次使用 npm install 的时候安装出错,提示为 npm 与 node 的版本有问题,所以就想着卸载重新装一个版本. 但是因为刚使用「 Mac 」所以 ...

  2. Linux之软件包安装管理

    软件包分类: 源码包:脚本安装包(源C代码) 二进制包(rpm包,系统默认包) 源码包 1.源码包优点 开源,如果有足够的能力,完全可以修改源代码 可以自己选择所需要安装的功能 软件是编译安装,所以更 ...

  3. git安装方法

    点击 http://git-scm.com/download 选择你使用的操作系统,如果是linux就可以看到命令行,windows则是下载客户端

  4. Sum Root to Leaf Numbers深度优先计算路径和

    Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...

  5. JVM学习篇章（二）

     上节我们已经介绍了jvm和监控的一下方法,下面举例说明一下:  瓶颈问题定位: 内存泄漏原因定位: 1.常见的内存泄漏 2.定位的方法

  6. JMeter 参数意义

    样本数目:运行时得到的取样器响应结果个数 最新样本:最近一个取样器结果的响应时间 平均:所有取样器结果的响应时间平均值 偏离:所有取样器结果的响应时间标准差 吞吐量:每分钟响应的取样器结果个数 中值: ...

  7. TCP/IP 协议栈学习代码

    全部代码 直接使用socket 客户端 import java.io.*; import java.net.Inet4Address; import java.net.InetSocketAddres ...

  8. 云数据库将进入企业级百万IOPS时代

    IOPS (Input/Output Operations Per Second),即每秒进行读写(I/O)操作的次数,以衡量存储每秒可接受多少次主机发出的访问.数据库,特别是关系型数据库由于需要处理 ...

  9. android完美的退出方法

    http://blog.csdn.net/get123/article/details/9001214

  10. Myeclipse 方法中文注释看不到

    参考以下几种解决方式: 1 改变整个文件类型的编码格式 1) eclipse->window->preferences->General->Content Types 2) 找 ...