vue26-2.0循环
3. 循环
2.0里面默认就可以添加重复数据 arr.forEach(function(item,index){ }); 去掉了隐式一些变量
$index $key 之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array" 4. 可以添加重复数据：track-by="id"
变成
<li v-for="(val,index) in list" :key="index">
:key="index"是为了提升循环性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue1.0.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in list" track-by="$index">
{{val}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="(val,index) in list">
{{val}} {{index}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:{//json
a:'apple',
b:'banana',
c:'cell'
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加">
<ul>
<li v-for="(val,key) in list">
{{val}} {{key}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="(val,index) in list" :key="index">
{{val}} {{index}}
</li>
</ul>
</div>
</body>
</html>
vue26-2.0循环的更多相关文章
- [moka同学笔记]Yii2.0循环查询并对结果累加求和
在控制器中查询好数据 $model 在视图中输入 <?php foreach($model as $key=>$r):?> <tr class="text-cent ...
- 3 循环语句——《Swift3.0从入门到出家》
3 循环语句 当一段代码被多次重复利用的使用我们就使用循环 swift提供了三种形式的循环语句 1.while 循环 2.repeat — while 循环 3.for — in 循环 while 循 ...
- viewpage 循环滑动播放图片
一般来说,viewpage 只支持图片的顺序滑动播放,在滑到边界时就再也滑不动了,如果要想继续滑动,只能向两边额外增加一张相片,即把第一张相片的位置放在最后一张图片的后面,给用户的感觉我继续滑就滑到了 ...
- while 循环 于 for循环语句
while 循环 while 循环 while 条件: 如果条件是真的,就继续的循环 如果条件是假的,就停止循环 循环的意思就是让程序重复地执行某些语句,whiler循环就是循环结构的一种,当事先不知 ...
- HDU 4370 0 or 1 （最短路+最小环）
0 or 1 题目链接: Rhttp://acm.hust.edu.cn/vjudge/contest/122685#problem/R Description Given a n*n matrix ...
- java08双重循环打印图形
// 九九乘法表 外层循环每执行一次,内层循环执行一遍 for (int i = 1; i <= 9; i++) { // 外层控制的是行数 for (int j = 1; j <= i; ...
- 宏定义中使用do{}while(0)的好处 （转载）
宏定义中使用do{}while(0)的好处 #define MACRO_NAME(para) do{macro content}while(0) 的格式,总结了以下几个原因: 1,空的宏定 ...
- c 指针 及其位运算循环移动拔河比赛问题代码
week_2_day1_7.7 周一//用字符数组 来实现 字母大小写转换#include<stdio.h>void desc( char *a ,int n){ char *i ...
- 利用for循环求1-100之间的奇数和 and 0-100的偶数和
为了方便自己计算,以下代码只求1-10的奇数和 and 0-10的偶数和 1-10的奇数从1开始分别为1.3.5.7.9 代码如下 /* Name:循环语句得出奇数.偶数并相加求和 Copyright ...
随机推荐
- C语言基础 (3) C语言介绍
01回顾 02 语言介绍 语言是人和人交流,C语言是人和机器交流. 03_为什么学C语言 04_第一个C代码编译运行 #include <stdio.h> int main() { // ...
- linux 杀掉端口
netstat -apn|grep 8184 tcp 0 0 0.0.0.0:8184 0.0.0.0:* LISTEN ...
- centos7-centos6常用配置对比
设置(CentOS 6 vs CentOS 7)系统常用配置 ysvinit vs Upstart vs Systemd) 常见设置: 字符集CentOS 6方法:/etc/sysconfig/i1 ...
- 紫书 习题 8-17 UVa 11536 （滑动窗口）
这道题说连续子序列, 马上就想到滑动窗口. 注意窗口里面的元素中小于等于k的才是有效元素.记录窗口里面有效元素的个数, 满足了之后开始 缩短窗口, 如果左端点不是有效元素或者即使窗口中存在这个元素的个 ...
- PatentTips - Method for network interface sharing among multiple virtual machines
BACKGROUND Many computing systems include a network interface card (NIC) to provide for communicatio ...
- HDU——T 1068 Girls and Boys
http://acm.hdu.edu.cn/showproblem.php?pid=1068 Time Limit: 20000/10000 MS (Java/Others) Memory Li ...
- 8、java高级面向对象-重载、构造器重载、初始化块、this、super、对象构造和初始化分析、覆盖、toString
1.方法的重载(overload) 同一个类中同时存在一个以上的同名函数,参数个数或类型不同或顺序不同,称为方法的重载. 和返回值无关! 构造器重载:非默认构造器和默认构造器其实就是方法的重载. 2. ...
- CSS中关于vertical-align垂直对齐
一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你 ...
- ASP.NET Identity 角色管理（Roles）
当我们使用ASP.NET 4.5创建模板项目时,会发现模板只提供了ApplicationUserManager用于用户的登录注册.修改.设置等,而没有提供与用户角色相关的代码,对此就需要我们自己手动的 ...
- 基于JS的身份证验证（完整版）
var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...