第二章 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 ...
随机推荐
- springboot后端实现条件查询，要配合使用mybatis
package cn.com.dyg.work.sqlgen; import cn.com.dyg.work.common.exception.DefException; import cn.com. ...
- CNN卷积汇总
1,卷积作用:减少参数(卷积核参数共享),卷积过程中不断对上一个输出进行抽象,由局部特征归纳为全局特征(不同卷积层可视化可以观察到这点) 2,卷积核 早期卷积核由人工总结,如图像处理中有: 深度神经网 ...
- Linux C/C++基础——Windows远程登录Linux
首先介绍两个ubuntu系统管理命令,用来测试连通性,及获取IP地址. 1.ping ping命令用来测试远程主机的连通性 使用方法:ping [参数] 远程主机IP地址 参数 功能 -a 每次相应时 ...
- python笔记之元祖
元祖创建使用圆括号括起来,中间元素使用逗号隔开 如:tuple1 = (1,2,3,4) tuple2 = () 空元祖 #!/usr/bin/env python #-*-coding:utf-8- ...
- hadoop的单机配置
hadoop的单机配置 准备工作 利用vim /etc/sysconfig/network命令修改主机名称. Ssh security shell 远程登录 登录远程服务器 $ ssh user@ho ...
- python 爬虫 requests模块（response常用属性）
response常用属性 content获取的response对象中的二进制(byte)类型的页面数据response.content 返回响应状态码response.status_code 200 ...
- aws技术链接
S3: https://docs.aws.amazon.com/s3/?id=docs_gateway emrfs: https://docs.aws.amazon.com/emr/latest/Ma ...
- 【转帖】msvcp100.dll和msvcr100.dll
VS发布软件时去除msvcp100.dll和msvcr100.dll图解说明 https://blog.csdn.net/yu__jia/article/details/82753262 msvcp. ...
- python list pop()方法
#pop()用于移除列表中的一个元素(默认是最后一个元素,并且返回该元素的值) list1=['Google','Runoob','Taobao'] list_pop=list1.pop() prin ...
- kafka安装使用配置1.1
官方文档 rz上传到/usr/local/下 解压 tar xzvf 文件 改名 mv 文件 名字 环境变量 vi /etc/profile export KAFKA_HOME=/usr/local/ ...