1.v-for循环普通数组

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <title>Document</title>
  8.      <!--1.导入Vue的包-->
  9.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  10.    </head>
  11.  
  12.    <body>
  13.        <div id="app">
  14.         <!--  <p>{{list[0]}}</p>
  15.          <p>{{list[1]}}</p>
  16.          <p>{{list[2]}}</p>
  17.          <p>{{list[3]}}</p>
  18.          <p>{{list[4]}}</p> -->
  19.  
  20.          <p v-for="(item,i) in list">索引值：{{i}}---每一项：{{item}}</p>
  21.        </div>
  22.  
  23.        <script>
  24.            //创建 Vue 实例，得到 ViewModel
  25.            var vm =  new Vue({
  26.                el:'#app',
  27.          data:{
  28.            list:[1,2,3,4,5,6]
  29.          },
  30.          methods:{}
  31.            });
  32.        </script>
  33.    </body>
  34.  </html>

2.v-for循环对象数组

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <title>Document</title>
  8.      <!--1.导入Vue的包-->
  9.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  10.    </head>
  11.  
  12.    <body>
  13.      <div id="app">
  14.        <p v-for="(user,i) in list">Id：{{user.id}}---名字：{{user.name}}---索引：{{i}}</p>
  15.      </div>
  16.  
  17.      <script>
  18.        //创建 Vue 实例，得到 ViewModel
  19.        var vm =  new Vue({
  20.          el:'#app',
  21.          data:{
  22.            list:[
  23.               {id:1,name:'zs1'},
  24.               {id:2,name:'zs2'},
  25.               {id:3,name:'zs3'},
  26.               {id:4,name:'zs4'}
  27.            ]
  28.          },
  29.          methods:{}
  30.        });
  31.      </script>
  32.    </body>
  33.  </html>

3.v-for循环对象

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <title>Document</title>
  8.      <!--1.导入Vue的包-->
  9.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  10.    </head>
  11.  
  12.    <body>
  13.        <div id="app">
  14.        <!--注意：在遍历对象身上的键值对的时候，除了有val key ，在第三个位置还有一个索引-->
  15.        <p v-for="(val,key,i) in  user">值是：{{val}}---键是：{{key}}---索引{{i}}</p>
  16.        </div>
  17.  
  18.        <script>
  19.            //创建 Vue 实例，得到 ViewModel
  20.            var vm =  new Vue({
  21.                el:'#app',
  22.          data:{
  23.            user:{
  24.              id:1,
  25.              name:'安迪',
  26.              gender:'男'
  27.            }
  28.          },
  29.          methods:{}
  30.            });
  31.        </script>
  32.    </body>
  33.  </html>

4.v-for迭代数字

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <title>Document</title>
  8.      <!--1.导入Vue的包-->
  9.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  10.    </head>
  11.  
  12.    <body>
  13.        <div id="app">
  14.       <!-- in后面我们放过普通数组，对象数组，对象，还可以放数字 -->
  15.       <!--  注意：如果使用v-for迭代数字的话，前面的count值从1开始 -->
  16.        <p v-for="count in 10">这是第{{count}}次循环</p>
  17.        </div>
  18.  
  19.        <script>
  20.            //创建 Vue 实例，得到 ViewModel
  21.            var vm =  new Vue({
  22.                el:'#app',
  23.          data:{
  24.            msg:''
  25.          },
  26.          methods:{}
  27.            });
  28.        </script>
  29.    </body>
  30.  </html>

第二章 Vue快速入门-- 17 v-for指令的四种使用方式的更多相关文章

  1. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. sh脚本实战

    做了什么东西还是要尽快移动到博客上,不然回头看自己写的东西已经看不懂了... 凭着回忆+搜资料,把当初写sh脚本的过程写上来. 首先新建一个.sh文件,用vim就可以 在sh的第一行,写上 #!/bi ...

  2. git 参考手册-简明指南

    很久没发文了,来头条以后更忙了,也没精力去分享一些有营养的内容了.这次分享的 git 的方方面面,基本来自于我的笔记.git 这东西算是为数不多每天都要用的东西了,但是我觉得也不至于从头至尾去了解他的 ...

  3. LeetCode.1089-重复的0(Duplicate Zeros)

    这是小川的第392次更新,第423篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第255题(顺位题号是1089).给定一个固定长度的整数数组arr,复制每次出现的零,将剩 ...

  4. linux如何设置磁盘配额？

    环境:CentOS7 需求:  zhang3 用户在  /dev/sdb1  上,只能使用100M的空间,建立 200个文件. 注意事项:XFS  不能对  /   开启配额             ...

  5. ubuntu 16.04 server 扩容(LVM)磁盘

    因为发现我的本地server出现磁盘满了的情况 所以进行lvm的扩容 1 查看磁盘情况 df -h 原本发现 /dev/mapper/ubuntu1604--vg-root 这个磁盘满了 所以要进行扩 ...

  6. C#4.0中的协变和逆变

    原文地址 谈谈.Net中的协变和逆变 关于协变和逆变要从面向对象继承说起.继承关系是指子类和父类之间的关系:子类从父类继承所以子类的实例也就是父类的实例.比如说Animal是父类,Dog是从Anima ...

  7. Centos7 安装多版本php 并添加swoole拓展

    服务器默认安装了php7 直接使用lnmp工具包安装php5.6 使用之前的lnmp安装包,切换到root sudo su - 运行 选择5.6 安装完成 没有安装swoole拓展 由官方https: ...

  8. 自然语言处理工具hanlp定制用户词条

    作者:baiziyu 关于hanlp的文章已经分享过很多,似乎好像大部分以理论性的居多.最近有在整理一些hanlp应用项目中的文章,待整理完成后会陆续分享出来.本篇分享的依然是由baiziyu 分享的 ...

  9. [LGP5115] Check,Check,Check one two!

    神奇的思路,还是要学习一个. 题意:给你一个字符串,并定义两个前缀的lcs.两个后缀的lcp,求式子膜\(2^{64}\)的值. \[ \sum_{1\le i<j\le n} lcp(i,j) ...

  10. # 组合数学-组合数+lacus定理

    目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 数论-组合数+lacus定理 组合数计算 为避免爆long long,\(20!\)就达到了long long 的范围,采 ...