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 ...
随机推荐
- 使用wubi安装ubuntu14.04出现的常见错误的解决办法
花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot download the metalink and therefore the ISO”错误,解决后,又报“ ...
- php的依赖注入容器
这里接着上一篇 php依赖注入,直接贴出完整代码如下: <?php class C { public function doSomething() { echo __METHOD__, '我是C ...
- linux内核里的字符串转换 ,链表操作常用函数(转)
1.对双向链表的具体操作如下: list_add ———向链表添加一个条目 list_add_tail ———添加一个条目到链表尾部 __list_del_entry ———从链表中删除相应的条目 l ...
- POJ 2484 A Funny Game(智商博弈)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6397 Accepted: 3978 Description Alice ...
- 2018-11-06 Visual Studio Code插件-英汉词典初版发布
VS插件市场地址: 英汉词典 - Visual Studio Marketplace 开源在: program-in-chinese/vscode_english_chinese_dictionary ...
- windows10系统关闭自动更新服务
一.关闭Windows10系统的自动更新服务 1:使用快捷键Win+R,打开运行 2:输入命令:services.msc,打开系统服务界面 找到Windows Update双击 将启动类型改为[禁用] ...
- 基于Docker的TensorFlow机器学习框架搭建和实例源码解读
概述:基于Docker的TensorFlow机器学习框架搭建和实例源码解读,TensorFlow作为最火热的机器学习框架之一,Docker是的容器,可以很好的结合起来,为机器学习或者科研人员提供便捷的 ...
- 如何查看程序所占端口号和IP
如何查看程序所占端口号和IP 一个软件可能占用多个端口拥有多个目标IP,下面以FQ工具Lantern为例,说明端口查看方法: 1.借助第三方软件查看 如果你电脑上安装了360等优化工具,可能会自带查看 ...
- 3Delight feats. OpenVDB
Full GI, no multiple scattering now (no point-cloud similar solution in 3Delight now) Blackbody Cart ...
- c# .Net随机生成字符串代码
/// <summary> /// 随机生成字符串 /// </summary> /// <param name="OperationType"> ...