定义数据:

<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值

html代码:
<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对象的几种方式的更多相关文章

  1. JavaScript阻止修改对象的三种方式

    JavaScript中,我们希望别人无法修改我们创建的对象.比如,代码库的作者很可能想锁定核心库的某些部分来保证它们不被意外地修改.ES5中引入了三种锁定修改的级别:防止扩展preventExtens ...

  2. JavaScript数组去重—ES6的两种方式

    说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...

  3. JavaScript中定义对象的四种方式

    最近在阅读< JavaScript 高级程序设计>,未免遗忘读过的内容,就打算以博客的形式做些读书笔记.今天介绍的是 JavaScript 中的四种定义对象的方法,除了这四种方法,还有工厂 ...

  4. JavaScript获取DOM对象的几种方式

    1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 2.getElementsByName() 方法可返回带有指定名称的对象的集合 3.getElementsByTa ...

  5. JavaScript 创建类/对象的几种方式

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  8. javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())

    javascript 数组和对象的浅度复制和深度复制在平常我们用 ‘=’来用一个变量引用一个数组或对象,这里是‘引用’而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3,' ...

  9. JavaScript 数组(Array)对象的方法

    JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...

随机推荐

  1. mybatis XML中 遍历map写法

    <select id="selectMapTest" parameterType="java.util.HashMap" resultMap=" ...

  2. nodemailer + express + h5 拖拽文件上传 实现发送邮件

    一.部署 1.部署Express 2.准备一个邮箱并开始SMTP服务 二.服务器端 三.客户端 四.效果:

  3. K8S 基本操作

    上一篇文章中,我们一创建了一个简单的 K8S 集群,https://www.cnblogs.com/klvchen/p/9553499.html 这里我们开始使用 kubectl 命令来创建应用,下面 ...

  4. 洛谷P4592 [TJOI2018]异或(可持久化01Trie)

    题意 题目链接 可持久化01Trie板子题 对于两个操作分别开就行了 #include<bits/stdc++.h> using namespace std; const int MAXN ...

  5. application.properties多环境配置文件、jar包外部配置文件、配置项加密、程序中配置使用

    一.简介 spring boot项目application.properties文件存放及使用介绍 二.方法一多环境配置文件 我们一般都会有多个应用环境,开发环境.测试环境.生产环境,各个环境的配置会 ...

  6. 如何用ABP框架快速完成项目(5) - 用ABP一个人快速完成项目(1) - 使用代码生成器

    用ABP一个人快速完成项目有如下要点: 站在巨人的肩膀上 - 使用代码生成器 站在巨人的肩膀上 - 使用成熟控件框架, 一个框架不够就上两个, 两个不够就上三个 通过微服务模式而不是盖楼式来避免难度升 ...

  7. 如何用ABP框架快速完成项目(11) - ABP只要加人即可马上加快项目进展- 全栈篇(2) - 不推荐模块组件化, 推荐微服务

    一个人写代码不需要担心会和别人的代码冲突, 不需要做代码合并, 不需要担心自己的代码被覆盖. 但是多个人一起写代码就需要担心这些问题.   解决这些问题的方法很多, 比如用AzureDevOps(TF ...

  8. 开发Spring过程中几个常见异常(一)

    异常一:java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory 原因:未导入有关日志管理的jar包或者未添加到路径. ...

  9. Android string.xml 添加特殊字符

    解决项目中在string.xml 中显示特殊符号的问题,如@号冒号等.只能考虑使用ASCII码进行显示: @号 @ :号 : 空格   以下为常见的ASCII十进制交换编码: --> <- ...

  10. Mac上一条命令搭建web服务器

    实际测试工作中偶尔会需要搭建Web服务器环境,由于Mac OS X自带了Apache和PHP环境,只需要简单的启动就可以. 开启Apache 开启Web服务器的方法有两种(默认启动端口号是80): 打 ...