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 的范围,采 ...