vue - for遍历数组
注释上,也很清楚了哈.
1. item是循环名字,items是循环的数组
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Step1.对于vue,可以用cdn -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<style>
#app div{
padding: 2%;
margin-bottom: 1%;
border-bottom: 1px solid #ddd;
background-color: blanchedalmond;
}
</style>
</head> <body> <div id="app">
<!-- item是循环名字,items是循环的数组 -->
<div v-for="item in items">
{{item}}
</div>
</div> <script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello World!',
items:[10,2,3,4,5]
}
})
</script>
</body> </html>
vue - for遍历数组的更多相关文章
- Vue中遍历数组的新方法
1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...
- 【VUE】vue中遍历数组和对象
一.遍历对象 对象数据 cities:{ "A":[{ "id": 56, "spell": "aba", " ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- Vue基础学习 --- 遍历数组
<body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user i ...
- vue_v-for_遍历数组_遍历对象
1. v-for 遍历数组 html <div id="test"> <ul> <li v-for="(p, index) in perso ...
- *使用while循环遍历数组创建索引和自增索引值
package com.chongrui.test;/* *使用while循环遍历数组 * * * */public class test { public static void main ...
- nodejs 遍历数组的两种方法
var array = [1,2,3]; array.forEach(function(v,i,a){ console.log(v); console.log(i); console.log(a); ...
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)
js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //for ...
随机推荐
- 用Fiddler进行弱网测试
1.作为一个好的程序猿,不但要写一手高质量的代码,而且要学会用高质量的测试工具测试自己的代码效果,接下来给大家推荐一下:用Fiddler进行弱网环境下的测试,请不要忽略这一点,因为用户在网速慢的情况下 ...
- Python安装scrapy提示 error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++
error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools&quo ...
- Windows命令远程执行工具Winexe
Windows命令远程执行工具Winexe 在对Windows系统执行渗透测试中,通过各种方式可以获取目标主机的用户名和密码.这时,只要对方主机开启文件共享服务,就可以借助Winexe工具远程执行 ...
- 【BZOJ 3238】【AHOI 2013】差异
http://www.lydsy.com/JudgeOnline/problem.php?id=3238 后缀数组裸题但是\(5\times 10^5\)貌似常数有点大就过不了?(我的sa常数那么大想 ...
- 【线段树】HDU1394 - Minimum Inversion Number
[题目大意] 给出0..n-1组成的一段数,可以移动前几个数到结尾.求出最小的逆序对个数. [思路] 先用线段树求出逆序对,方法和树状数组是一样的.然后对于当前第一个数num[0],在它之后比它小的数 ...
- bzoj 4506: [Usaco2016 Jan]Fort Moo
4506: [Usaco2016 Jan]Fort Moo Description Bessie is building a fort with her friend Elsie. Like any ...
- 分页器与form表单
分页器 分页器对象 from django.core.paginator import Paginator Paginator对象: paginator = Paginator(user_list, ...
- [转]Hibernate中Session的get和load
hibernate中Session接口提供的get()和load()方法都是用来获取一个实体对象,在使用方式和查询性能上有一些区别.测试版本:hibernate 4.2.0. get Session接 ...
- 基于TCP通信的客户端断线重连
转载:http://www.cnblogs.com/networkcomms/p/4304362.html 源码下载 在CS程序中,断线重连应该是一个常见的功能. 此处的断线重连主要指的是服务器端因为 ...
- 乐观锁悲观锁对应的JAVA代码和数据库
乐观锁悲观锁是一种思想.可以用在很多方面. 比如数据库方面.悲观锁就是for update乐观锁就是 version字段 JDK方面:悲观锁就是sync乐观锁就是原子类(内部使用CAS实现) 本质来说 ...