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 ...
随机推荐
- Ubuntu上面安装docker
1.先用uname -r查看系统的信息 2.安装docker的命令为 sudo apt install docker.io 3.然后就能实现安装了 但是:运行docker search golang, ...
- Maven命令下载源码和javadocs
1:Maven命令下载源码和javadocs 当在IDE中使用Maven时如果想要看引用的jar包中类的源码和javadoc需要通过maven命令下载这些源码,然后再进行引入,通过mvn命令能够容易的 ...
- Fastlane基础介绍
Fastlane是什么 Git地址: Fastlane 文档地址:Fastlane Document Fastlane是一整套的客户端CICD工具集合.Fastlane可以非常快速简单的搭建一个自动化 ...
- 【BZOJ 1177】 [Apio2009]Oil
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如上图. 显然如果三个正方形.只可能是上面的情况. 则可以处理一下左上角.右上角.左下角.右下角的前缀最大正方形(dp),以及以某一 ...
- 洛谷——P2863 [USACO06JAN]牛的舞会The Cow Prom
https://www.luogu.org/problem/show?pid=2863#sub 题目描述 The N (2 <= N <= 10,000) cows are so exci ...
- java基本数据类型复习
1.基本取值范围及对应封装器(参考:http://www.cnblogs.com/Free-Thinker/p/4573068.html): 简单类型 boolean byte char short ...
- Django是什么
Django是什么 Django是什么? 是基于python语言的优秀的web开发框架.很多有名的网站比如youtube就是用django开发的. Python写的开源Web应用框架, 快速搭建blo ...
- thinkphp5项目--个人博客（四）
thinkphp5项目--个人博客(四) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...
- [Swift] 随机数 | Random numbers
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- kali 2.0 linux中的Nmap的主机探测
不多说,直接上干货! 如果是第一次接触Nmap,推荐在MSF终端中输入不加任何参数的Nmap命令,以查看其使用方法. 更多,其实, msf > nmap -h [*] exec: nmap -h ...