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 ...
随机推荐
- [NOIP补坑计划]NOIP2012 题解&做题心得
场上预计得分:100+90+70+100+100+3060=490520(省一分数线245) 题解: D1T1 Vigenère 密码 题面 水题送温暖~~ #include<iostream& ...
- BZOJ 4472 [Jsoi2015]salesman(树形DP）
4472: [Jsoi2015]salesman Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 417 Solved: 192[Submit][St ...
- sz xshell
yum install lrzsz -y
- 紫书 例题8-9 UVa 1451 （数形结合）
这道题用了数形结合, 真的牛逼, 完全想到不到还可以这么做 因为题目求的是平均值, 是总数除以个数, 这个时候就可以联系 到斜率, 也就是说转化为给你一堆点, 让你求两点之间的最大斜率 要做两个处理 ...
- python中的try...except...finally函数
异常Error 我们在写代码的时候,经常会遇见程序抛出Error无法执行的情况 一般情况下,在Python无法正常处理程序时就会发生一个异常.异常是Python对象,表示一个错误.当Python脚本发 ...
- 简单搭建zookeeper集群分布式/伪分布式
分布式搭建 一.下载zookeeper安装包 自行下载:我用的是 zookeeper-3.5.4-beta.tar.gz 二.环境准备 1. 我的虚拟机自带的java是1.7的,这个版本要求java1 ...
- 关于ValueAnimation以及Interpolator +Drawable实现的自己定义动画效果
ValueAnimation : Android中的属性动画,他跟objectAnimation是比补间动画拥有更强大的功能,能够操作对象.所以我们能够在自 定义View中通过他们来实现些特别的功能. ...
- java 经常使用測试框架
1. 经常使用单元化測试框架 junit4 , TestNG 能够通过注解 @Before @After @BeforeClass @AfterClass 分别作方法与类级的初始化与结束动作. tes ...
- Atitit.运行cmd 命令行 php
Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...
- layer是什么
layer是什么 总结 layer就是一个web弹框 简介 layer是一款web弹层组件,致力于服务各个水平段的开发人员. 可以让你想到即可做到的web弹窗 概述 [1] layer,一个可以让你 ...