Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式
定义数据:
<script>
new Vue({
el:"#test",
data:{
message:"infor",
list:["a","b","c","d","e"],
web:{
"百度":"https://www.baidu.com",
"搜狐":"https://www.sohu.com",
"新浪":"https://www.sina.com",
"淘宝":"https://www.taobao.com"
}
}
})
</script>
html结构:
<div id="test">
<div>{{ message }}</div>
<div>{{ list }}</div>
<div>{{ web }}</div>
</div>
输出结果:
v-for对数组的几种输出方式:
1.只输出value值
html代码:
<div id="test">
<div v-for = "item in list" :key="index">{{ item }}</div>
</div>
输出结果:
2.输出value值且输出对应的索引值
html代码:
<div id="test">
<div v-for = "(item,index) in list" :key="index">{{ item }}的索引值是{{ index }}</div>
</div>
v-for对json格式的几种输出方式
1.只输出value值
<div id="test">
<div v-for = "value in web" :key="index">{{ value }}</div>
</div>
输出结果:
2.输出value值和key值
html代码:
<div id="test">
<div v-for = "(value,key) in web" :key="index">{{ key }} 的网址是 : {{ value }}</div>
</div>
输出结果:
3.输出value值,key值和索引值index
html代码:
<div id="test">
<div v-for = "(value,key,index) in web" :key="index">{{ value }}__{{ key }} 的网址是 : {{ item }}</div>
</div>
输出结果:
可以看出,在数组里面,小括号里面的参数第一位是value值,第二位是索引值
在json里面,第一位是value值,第二位是key值,第三位是索引值
Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式的更多相关文章
- JavaScript阻止修改对象的三种方式
JavaScript中,我们希望别人无法修改我们创建的对象.比如,代码库的作者很可能想锁定核心库的某些部分来保证它们不被意外地修改.ES5中引入了三种锁定修改的级别:防止扩展preventExtens ...
- JavaScript数组去重—ES6的两种方式
说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
- JavaScript中定义对象的四种方式
最近在阅读< JavaScript 高级程序设计>,未免遗忘读过的内容,就打算以博客的形式做些读书笔记.今天介绍的是 JavaScript 中的四种定义对象的方法,除了这四种方法,还有工厂 ...
- JavaScript获取DOM对象的几种方式
1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 2.getElementsByName() 方法可返回带有指定名称的对象的集合 3.getElementsByTa ...
- JavaScript 创建类/对象的几种方式
在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量 ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())
javascript 数组和对象的浅度复制和深度复制在平常我们用 ‘=’来用一个变量引用一个数组或对象,这里是‘引用’而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3,' ...
- JavaScript 数组(Array)对象的方法
JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...
随机推荐
- Intellij idea 项目目录设置 与包的显示创建
1.把目录设置成为层级结构显示.和eclipse类似 去掉flatten Packages前面的勾 在项目中创建多级包的时候要注意,必须在Java下建,并且要全输入才能识别
- SQL 語法
查詢 Sql = ("SELECT A1, A2, A5, A4 FROM Table1 ") 筆數 Sql = ("Select COUNT(*) From TW01. ...
- innodb mvcc实现机制
多版本并发控制 大部分的MySQL的存储 引擎,比如InnoDB,Falcon,以及PBXT并不是简简单单的使用行锁机制.它们都使用了行锁结合一种提高并发的技术,被称为MVCC(多版本并 发控制).M ...
- Netty实战十之编解码器框架
编码和解码,或者数据从一种特定协议的格式到另一种格式的转换.这些任务将由通常称为编解码器的组件来处理.Netty提供了多种组件,简化了为了支持广泛的协议而创建自定义的编解码器的过程.例如,如果你正在构 ...
- 异常: Recieved SHUTDOWN signal from Resourcemanager ,Registration of NodeManager failed, Message from ResourceManager: NodeManager from localhost doesn't satisfy minimum allocations, Sending SHUTDOWN s
异常: Recieved SHUTDOWN signal from Resourcemanager ,Registration of NodeManager failed, Message from ...
- Spring之AOP在XML中的配置方法
AOP 即 Aspect Oriental Program 面向切面编程 先来一个栗子: <aop:config> <aop:pointcut id="loggerCutp ...
- javascript中加号(+)操作符的作用
// 16进制转换:+”0xFF”; // -> 255 // 获取当前的时间戳,相当于`new Date().getTime()`:+new Date(); // 比 ...
- favicon.ico在chrome里显示正常,在ie,edge浏览器中不显示
代码: <head> <meta charset="UTF-8"> <link href="imgs/favicon.ico" r ...
- js 从一个对象中找到属性值相等的集合
getobjs: function(objs, key, value) { var result = []; for (var i in objs) { var obj = $(objs[i]); i ...
- 《JavaScript高级程序设计》笔记:JavaScript简介(一)
javascript从一个简单的输入验证器发展成为一门强大的编程语言,完全出乎人们的意料. javascript实现一个完整的javascript实现应该由下列三个不同的部分组成:1:核心(ECMAS ...