注释上,也很清楚了哈.

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. Codeforces 1082 B. Vova and Trophies-有坑 (Educational Codeforces Round 55 (Rated for Div. 2))

    B. Vova and Trophies time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. FFT实现高精度乘法

    你应该知道$FFT$是用来处理多项式乘法的吧. 那么高精度乘法和多项式乘法有什么关系呢? 观察这样一个$20$位高精度整数$11111111111111111111$ 我们可以把它处理成这样的形式:$ ...

  3. Linux命令之find(二)

    接上一篇Linux命令之find(一) (1).实例 1.列出当前目录下及子目录下所有的.txt文件 [xf@xuexi ~]$ ls 1.txt 3.txt b.txt 公共 视频 文档 音乐 2. ...

  4. BZOJ 2789 letters(树状数组)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2789 [题目大意] 给出两个字符串,通过A字符串相邻之间字符的交换得到B字符串, 求最 ...

  5. 【贪心】POJ1328-Radar Installation

    [思路] 以每一座岛屿为圆心,雷达范围为半径作圆,记录下与x轴的左右交点.如果与x轴没交点,则直接退出输出“-1”.以左交点为关键字进行排序,从左到右进行贪心.容易知道,离每一个雷达最远的那一座岛与雷 ...

  6. Problem C: 指针:自定义函数length,调用它计算字符串的长度

    #include<stdio.h> int length(char*s) { int i,count; while(*s!='\0') { *(s++); count++; } retur ...

  7. [转] Ext Grid (ExtJs)上的单击以及双击事件

    例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...

  8. Unity3D 粒子系统

    我们先来看看Particle System在Inspector视窗中的属性: 1.Transform:可以控制粒子在世界或者本地坐标的改变.但是有点注意的是,如果你改变Scale属性值是不会影响粒子的 ...

  9. kindeditor在Firefoxt 和 Chrome 下不能取到值的解决方法

    默认form模式提交数据的时候,在ie下用户不需要进行任何设置和调用sync函数,因为editor已经自动调用,但是在firefox和 chrome下,用户如果不手动调用sync函数,editor的数 ...

  10. 给XC2440开发板烧写程序的N种方式

    转:http://blog.chinaunix.net/uid-22030783-id-3420080.html 给XC2440开发板烧写程序非常灵活,总结起来有这么几种方式:   空片烧写(flas ...