<!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. linux系统命令配置文件

    系统命令要独占地控制系统,并让一切正常工作.所有如 login(完成控制台用户身份验证阶段)或 bash(提供用户和计算机之间交互)之类的程序都是系统命令.因此,和它们有关的文件也特别重要.这一类别中 ...

  2. jquery 日期和时间的逻辑，比较大小

    HTML:<ul> <li> <span>到达</span> <img class="date-s" src="/p ...

  3. 浅谈JavaScript的面向对象和它的封装、继承、多态

    写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...

  4. 如何在Liferay 7中创建一个简单的JSF Portlet

    这个将在Liferay IDE 3.1 M3的发布版中提供创建的选项,但是你也可以通过命令行来创建. 1.这是Liferay JSF团队的官网:http://liferayfaces.org/ 你能在 ...

  5. n!素因子p的幂 swjtuOJ 2090【数论】

    原文地址:http://blog.csdn.net/u012717411/article/details/47334969(感谢作者) 素因子分解写的非常好!数论一道好题:给以两个大整数n,s(n&l ...

  6. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章：第一人称摄像机和动态索引

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章:第一人称摄像机和动态索引 代码工程地址: https://g ...

  7. SDUT-2139_从起始点到目标点的最短步数（BFS）

    数据结构实验之图论五:从起始点到目标点的最短步数(BFS) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在古老的魔兽 ...

  8. BZOJ 1500 洛谷2042维护序列题解

    BZ链接 洛谷链接 这道题真是丧心病狂.... 应该很容易就可以看出做法,但是写代码写的....... 思路很简单,用一个平衡树维护一下所有的操作就好了,重点讲解一下代码的细节 首先如果按照常规写法的 ...

  9. 文字内容展开与折叠jquery代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. HTTP请求模型

    HTTP请求模型 HTTP请求模型 一.连接至Web服务器一个客户端应用(如Web浏览器)打开到Web服务器的HTTP端口的一个套接字(缺省为80). 例如:http://www.myweb.com: ...