第二章 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 ...
随机推荐
- 【JVM学习笔记】类加载过程
在Java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的:提供了更大的灵活性,增加了更多的可能性 JVM启动过程包括:加载.连接.初始化 加载:就是将class文件加载到内存.详细的说是 ...
- extentreports 测试报告引用extend.js/css失败
测试工程引用extentreports 生成的测试报告,因为报告中的js和css网络不通,所以页面乱码 解决思路: 下载需要的js.css放到测试工程的static目录下 下载extentreport ...
- 比较Json.Net和fastJson的效率
var zoo1 = new zoo(); zoo1.animals = new List<animal>(); zoo1.animals.Add(new cat()); zoo1.ani ...
- Python浅拷贝与深拷贝(可变对象与不可变对象)
第一次遇到深拷贝和浅拷贝的问题是用python在一个for循环中对一个list赋值,使用的语句是 a = b 这个b会不断带入循环,每次计算得到,最后发现list乱七八糟的,后来才发现,python中 ...
- docker中tomcat日志输出自定义
一,默认tomcat日志配置文件 /data/tomcat/conf/logging.properties 1,修改tomcat/conf下的logging.properties [root@harb ...
- 【linux杂谈】遇到REMOTE HOST IDENTIFICATION HAS CHANGED怎么办?
今日遇到如下问题: 警告的大概意思就是,主机密钥发生变更,并提示安全风险(可能存在中间人攻击) 但是事实是,这是因为我重装系统之后遇到的问题.重装系统后,指纹当然会发生变化了...在Xshell实验中 ...
- java学习-3
输入语句Scanner的使用方法 1.导包 import java.util.Scanner 2.创建 从键盘输入:Scanner sc = new Scanner(System.in); 3.使用 ...
- hadoop3.1.2队列
hapood3.1.2 capacity-scheduler.xml CDH6.2 在配置中输入fair,转成json格式看. yarn资源池配置: CDH--yarn--动态资源池配置 pool_d ...
- Oracle密码过期(the password has expired)
1.进入sqlplus模式--sqlplus / as sysdba; 2.查看用户密码的有效期设置(一般默认的配置文件是DEFAULT) SELECT * FROM dba_profiles WHE ...
- 【Python】【demo实验2】【打印乘法口诀表】
打印乘法口诀表 源代码: # encoding=utf-8 for i in range(1,10): print("\n") for j in range(1,10): if i ...