注释上,也很清楚了哈.

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遍历数组的更多相关文章

  1. Vue中遍历数组的新方法

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...

  2. 【VUE】vue中遍历数组和对象

    一.遍历对象 对象数据 cities:{ "A":[{ "id": 56, "spell": "aba", " ...

  3. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  4. Vue基础学习 --- 遍历数组

    <body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user i ...

  5. vue_v-for_遍历数组_遍历对象

    1. v-for 遍历数组 html <div id="test"> <ul> <li v-for="(p, index) in perso ...

  6. *使用while循环遍历数组创建索引和自增索引值

    package com.chongrui.test;/* *使用while循环遍历数组 *  *  * */public class test {    public static void main ...

  7. nodejs 遍历数组的两种方法

    var array = [1,2,3]; array.forEach(function(v,i,a){ console.log(v); console.log(i); console.log(a); ...

  8. 原生js使用forEach()与jquery使用each遍历数组,return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  9. js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //for ...

随机推荐

  1. 转:攻击JavaWeb应用[1]-javaEE基础

    http://www.cnblogs.com/oh3o/p/3224562.html JSP: 全名为java server page,其根本是一个简化的Servlet. Servlet:Servle ...

  2. thinkphp之自动完成

    1.自动完成 自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法,使用create方法创建数据对象的时候会自动完成数据处理.  因此,在ThinkPHP使用create方法来创建数据对象是 ...

  3. STM32通用定时器实现LED灯闪烁

    刚才看了一下STM32通用定时器的教程,其实和51的定时器使用差不多.只是因为32的时钟更复杂,可操控的寄存器更多,所以写的时候可能更复杂. 使用通用定时器中断的一般步骤:1.使能定时器时钟 这个需要 ...

  4. es6 Object的几个新方法

    扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal Object.isSealed 冻结对象 Object.freez ...

  5. Eclipse控制台

    Eclipse中的控制台,是以卡片布局方式来管理的.每运行一个新的程序,创建一个新的控制台,覆盖到原来的控制台之上. 控制台的控制按钮有10个,仅对其中部分作介绍 第1个按钮结束当前程序的运行 第2个 ...

  6. Bzoj4016/洛谷P2993 [FJOI2014] 最短路径树问题(最短路径问题+长链剖分/点分治)

    题面 Bzoj 洛谷 题解 首先把最短路径树建出来(用\(Dijkstra\),没试过\(SPFA\)\(\leftarrow\)它死了),然后问题就变成了一个关于深度的问题,可以用长链剖分做,所以我 ...

  7. 【高斯消元】CDOJ1785 曜酱的线性代数课堂(三)

    高斯消元求行列式板子. #include<cstdio> #include<cmath> #include<algorithm> #include<cstri ...

  8. python基础之数据类型之数字、字符串、列表

    数据类型及内置方法 一.数字类型 整数型(int) 1.用途:年龄,号码等 2.定义:age = 10   age = int(10) x = int(’11’)   int只能转换纯数字的字符串 3 ...

  9. [转]java中JSONObject与JSONArray的使用详细说明及有关JSON的工具类

    JSONObject与JSONArray的使用 一.JAR包简介 要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: 1.commons-lang.jar 2.c ...

  10. hdu 5236 Article 概率dp

    Article Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5236 ...