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 ...
随机推荐
- NuSOAP简介 php中使用webservice
许多机构已经采用了Apach和PHP作为他们的Web应用环境.在Web services模式中采用PHP可能看上去可能会比较难.但是事实上,搭配NuSoap,你可以轻松的应用PHP构建SOAP的客户端 ...
- luogu P1365 WJMZBMR打osu! / Easy（期望DP）
题目背景 原 维护队列 参见P1903 题目描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有nnn次点击要做,成功了就是o,失败了就是 ...
- 【Python常见问题总结】
1. python2 中 end = '' 取消换行没有用 解决办法: 在程序开始加入 from __future__ import print_function 2. 如何在电脑上同时使用pytho ...
- UVA Foreign Exchange
Foreign Exchange Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Your non ...
- ORACLE数据库字符集处理
简介: ORACLE数据库字符集,即Oracle全球化支持(Globalization Support),或即国家语言支持(NLS)其作用是用本国语言和格式来存储.处理和检索数据.利用全球化支持,OR ...
- 一：Java之面向对象基本概念
1.面向对象 面向对象(Object Oriented)是一种新兴的程序设计方法,或者是一种新的程序设计规范(paradigm).其基本思想是使用对象.类.继承.封装.多态等基本概念来进行程序设计.从 ...
- HDOJ 4975 A simple Gaussian elimination problem.
和HDOJ4888是一样的问题,最大流推断多解 1.把ISAP卡的根本出不来结果,仅仅能把全为0或者全为满流的给特判掉...... 2.在残量网络中找大于2的圈要用一种类似tarjian的方法从汇点開 ...
- win7 一个电脑接入多个显示器
Display 在第一个选项display,选中某一个屏幕的时候 如果被选中的屏幕已经是main display,那么下方会显示this is your currently main display ...
- List operations
The + operator concatenates lists: Similarly, the * operator repeats a list a given number of items: ...
- 在cncc的最后几天的笔记
数据库范式:http://blog.csdn.net/fg2006/article/details/6936439 数据库事务隔离级别:http://blog.csdn.net/fg2006/arti ...