第二章 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 ...
随机推荐
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- 数据测试003：利用Jmeter推送测试数据（下）
数据测试003:利用Jmeter推送测试数据(中) 今天继续学习用Jmeter推送数据,这次换Oracle数据 1)安装jdbc驱动,对应自己数据库安装的版本,我的是11g的,安装目录是在Jmeter ...
- UOJ#152盘子序列
题面君 那这是一题比较标准的单调栈的题目,维护一下单调栈并访问就好了 int n;//因为我写了十几行头文件..头文件就删了,大家自己加一下吧.. ]; ],s2[],t1,t2; int get() ...
- 云计算共享组件--Memcache缓存系统（4）
一.缓存系统 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告 ...
- 快速排序基本思想，递归写法，python和java编写快速排序
1.基本思想 快速排序有很多种编写方法,递归和分递归,分而治之法属于非递归,比递归简单多了.在这不使用代码演示.下面我们来探讨一下快速排序的递归写法思想吧. 设要排序的数组是A[0]……A[N-1], ...
- Web Components的概念和用法
参考链接:https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
- 浅谈Web图像优化
前端优化有很多,图像优化也是其中的一部分.无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分. 知其然,须知其所以然 图像优化的前提是需要了解图像的基本原理.常规的图像格式分为矢量图和位 ...
- LeetCode | DP专题详解
221 medium 221. Maximal Square Medium Given a 2D binary matrix filled with 0's and 1's, find the ...
- 我理解的CLH
学而时习之,不亦说乎! --<论语> 原创,转载请附原文链接,谢谢. CLH 思路 保持时序的锁基本思路就是将等待获取锁的线程放入 ...
- php导出excel方法： 所有语言通用
后端: //导出if($_GPC['export']==1){ $list_export = pdo_fetchall($sql.$where); include $this->templa ...