第二章 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 ...
随机推荐
- Django auth 用户验证
## Django本身内建这样的功能,admin管理页面就使用了这样的验证机制,admin管理页面就有Groups和Users选项 ## 需要在models.py中导入 from django.con ...
- Vue中的slot
个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参: Slot的通俗理解 是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自 ...
- git（程序员的时光机）
git 是什么 最强大的分布式版本控制系统,没有之一 版本控制: 完成一项任务,最终的成果可能是经过中间修修修改n次得到的,在这n个版本之间的切换就叫版本控制. 集中式的版本控制svn,cvs缺点: ...
- 用docker 跑 logstash节点 - kibana界面汉化
0.docker中logstash的配置文件 [root@VM_0_6_centos pipeline]# cat logstash.yml #http.host: "0.0.0.0&quo ...
- 访问https接口报错 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系
详细错误信息如下 请求错误信息:发生一个或多个错误.System.Net.Http.HttpRequestException: An error occurred while sending the ...
- MSSQL 索引
INCLUDE索引作用:减少 key lookup所带来的性能开销. 效率主要体现在覆盖查询(建的索引为覆盖索引),在查询时把SELECT显示列放在INCLUDE里作为非索引健列,不用于查询只显示在结 ...
- Python学习【day02】- Python基础练习题
#!/usr/bin/env python # -*- coding:utf8 -*- # 执行Python 脚本的两种方式 # 答:①在windows的cmd窗口下 > D:/Python/p ...
- .Net Core控制台应用加载读取Json配置文件
⒈添加依赖 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.FileExtensions Microsoft ...
- AppCan模拟器调试
来源: 1, 页面CSS调试 2, JS调试 3, 插件请打包后手机调试 4, 打开另一个页面示例: appcan.button("#myBtn", "ani-uct&q ...
- Laravel-admin form 表单是增加或者修改
Laravel-admin 实现 form 表单是增加或者修改的三种方法,应用情景:1.新增或者修改 form 展示的表单不同:2.新增或者保存前后回调进行其他的操作 1. use Illuminat ...