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 ...
随机推荐
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) Cards Sorting(树状数组)
Cards Sorting time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- ubuntu的boot分区报警,删除无用内核文件。
1. 查看当前使用内核:uname -r4.4.0-97-generic 2. 查看安装的内核dpkg --list 'linux-image*' 3. 删除旧内核sudo apt-get remov ...
- Linux命令之chattr
chattr [-RVf] [-v version] [mode] files… chattr修改文件在Linux第二扩展文件系统(E2fs)上的特有属性.符号模式(mode)有+-=[aAcCdDe ...
- CentOS7系统防火墙开关、状态与自启
首先需要说明的是CentOS7使用的是firewalld.service,而不是iptables.service [xf@xuexi ~]$ systemctl status firewalld.se ...
- Flask实战第45天:完成前台登录界面
我们的注册页面和登录页面有很多相似之处,因此,也可以基于一个模板来实现. 首先创建一个模板html,命名为front_signbase.html, 然后修改注册页面front_signup.html, ...
- Beaglebone Black教程项目1闪烁板载LED
Beaglebone Black教程项目1闪烁板载LED 项目1闪烁板载LED 当设置完你的Beaglebone Black的时候,可能早就非常期待你的第一个项目了.下面就来满足大家的愿望,当然,这个 ...
- Beaglebone Black教程Beaglebone Black的引脚分配
Beaglebone Black教程Beaglebone Black的引脚分配 Beaglebone Black的引脚分配 绝大多数的微型开发平台都提供了一些称为GPIO的输入输出端口.这些端口可以让 ...
- 函数的扩展--ES6
箭头函数 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号. var f = () => ({a:1}); f(); // 返回 {a: 1} 若写成: var ...
- Android Studio初级介绍
Android Studio原来不咋地,但是现在可以尝试抛弃eclipse转用它了, 亲儿子到底是亲儿子,现在的Android Studio已经今非昔比,用了一段时间,简直爱不释手,我觉得,It's ...
- [转] Log4j 配置 的webAppRootKey参数问题
在tomcat下部署两个或多个项目时,web.xml文件中最好定义webAppRootKey参数,如果不定义,将会缺省为“webapp.root”,如下:<!-- 应用路径 --> < ...