第二章 Vue快速入门-- 17 v-for指令的四种使用方式
1.v-for循环普通数组
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>Document</title>
- <!--1.导入Vue的包-->
- <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
- </head>
- <body>
- <div id="app">
- <!-- <p>{{list[0]}}</p>
- <p>{{list[1]}}</p>
- <p>{{list[2]}}</p>
- <p>{{list[3]}}</p>
- <p>{{list[4]}}</p> -->
- <p v-for="(item,i) in list">索引值:{{i}}---每一项:{{item}}</p>
- </div>
- <script>
- //创建 Vue 实例,得到 ViewModel
- var vm = new Vue({
- el:'#app',
- data:{
- list:[1,2,3,4,5,6]
- },
- methods:{}
- });
- </script>
- </body>
- </html>
2.v-for循环对象数组
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>Document</title>
- <!--1.导入Vue的包-->
- <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
- </head>
- <body>
- <div id="app">
- <p v-for="(user,i) in list">Id:{{user.id}}---名字:{{user.name}}---索引:{{i}}</p>
- </div>
- <script>
- //创建 Vue 实例,得到 ViewModel
- var vm = new Vue({
- el:'#app',
- data:{
- list:[
- {id:1,name:'zs1'},
- {id:2,name:'zs2'},
- {id:3,name:'zs3'},
- {id:4,name:'zs4'}
- ]
- },
- methods:{}
- });
- </script>
- </body>
- </html>
3.v-for循环对象
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>Document</title>
- <!--1.导入Vue的包-->
- <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
- </head>
- <body>
- <div id="app">
- <!--注意:在遍历对象身上的键值对的时候,除了有val key ,在第三个位置还有一个索引-->
- <p v-for="(val,key,i) in user">值是:{{val}}---键是:{{key}}---索引{{i}}</p>
- </div>
- <script>
- //创建 Vue 实例,得到 ViewModel
- var vm = new Vue({
- el:'#app',
- data:{
- user:{
- id:1,
- name:'安迪',
- gender:'男'
- }
- },
- methods:{}
- });
- </script>
- </body>
- </html>
4.v-for迭代数字
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>Document</title>
- <!--1.导入Vue的包-->
- <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
- </head>
- <body>
- <div id="app">
- <!-- in后面我们放过普通数组,对象数组,对象,还可以放数字 -->
- <!-- 注意:如果使用v-for迭代数字的话,前面的count值从1开始 -->
- <p v-for="count in 10">这是第{{count}}次循环</p>
- </div>
- <script>
- //创建 Vue 实例,得到 ViewModel
- var vm = new Vue({
- el:'#app',
- data:{
- msg:''
- },
- methods:{}
- });
- </script>
- </body>
- </html>
第二章 Vue快速入门-- 17 v-for指令的四种使用方式的更多相关文章
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- sh脚本实战
做了什么东西还是要尽快移动到博客上,不然回头看自己写的东西已经看不懂了... 凭着回忆+搜资料,把当初写sh脚本的过程写上来. 首先新建一个.sh文件,用vim就可以 在sh的第一行,写上 #!/bi ...
- git 参考手册-简明指南
很久没发文了,来头条以后更忙了,也没精力去分享一些有营养的内容了.这次分享的 git 的方方面面,基本来自于我的笔记.git 这东西算是为数不多每天都要用的东西了,但是我觉得也不至于从头至尾去了解他的 ...
- LeetCode.1089-重复的0(Duplicate Zeros)
这是小川的第392次更新,第423篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第255题(顺位题号是1089).给定一个固定长度的整数数组arr,复制每次出现的零,将剩 ...
- linux如何设置磁盘配额?
环境:CentOS7 需求: zhang3 用户在 /dev/sdb1 上,只能使用100M的空间,建立 200个文件. 注意事项:XFS 不能对 / 开启配额 ...
- ubuntu 16.04 server 扩容(LVM)磁盘
因为发现我的本地server出现磁盘满了的情况 所以进行lvm的扩容 1 查看磁盘情况 df -h 原本发现 /dev/mapper/ubuntu1604--vg-root 这个磁盘满了 所以要进行扩 ...
- C#4.0中的协变和逆变
原文地址 谈谈.Net中的协变和逆变 关于协变和逆变要从面向对象继承说起.继承关系是指子类和父类之间的关系:子类从父类继承所以子类的实例也就是父类的实例.比如说Animal是父类,Dog是从Anima ...
- Centos7 安装多版本php 并添加swoole拓展
服务器默认安装了php7 直接使用lnmp工具包安装php5.6 使用之前的lnmp安装包,切换到root sudo su - 运行 选择5.6 安装完成 没有安装swoole拓展 由官方https: ...
- 自然语言处理工具hanlp定制用户词条
作者:baiziyu 关于hanlp的文章已经分享过很多,似乎好像大部分以理论性的居多.最近有在整理一些hanlp应用项目中的文章,待整理完成后会陆续分享出来.本篇分享的依然是由baiziyu 分享的 ...
- [LGP5115] Check,Check,Check one two!
神奇的思路,还是要学习一个. 题意:给你一个字符串,并定义两个前缀的lcs.两个后缀的lcp,求式子膜\(2^{64}\)的值. \[ \sum_{1\le i<j\le n} lcp(i,j) ...
- # 组合数学-组合数+lacus定理
目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 数论-组合数+lacus定理 组合数计算 为避免爆long long,\(20!\)就达到了long long 的范围,采 ...