Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式
来源:互联网 发布:集贤一中网络空间主页 编辑:程序博客网 时间:2024/05/16 05:53
定义数据:
<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">{{ item }}</div> </div>
输出结果:
2.输出value值且输出对应的索引值
html代码:
<div id="test"> <div v-for = "(item,index) in list">{{ item }}的索引值是{{ index }}</div> </div>
v-for对json格式的几种输出方式
1.只输出value值
html代码:
<div id="test"> <div v-for = "item in web">{{ item }}</div> </div>
输出结果:
2.输出value值和key值
html代码:
<div id="test"> <div v-for = "(item,key) in web">{{ key }} 的网址是 : {{ item }}</div> </div>
输出结果:
3.输出value值,key值和索引值index
html代码:
<div id="test"> <div v-for = "(item,key,index) in web">{{ index }}__{{ key }} 的网址是 : {{ item }}</div> </div>
输出结果:
可以看出,在数组里面,小括号里面的参数第一位是value值,第二位是索引值
在json里面,第一位是value值,第二位是key值,第三位是索引值
有的文章里面说$index是数组的内置变量数组下标,$key是json内置变量,可是我没有测出来,且提示有错,不知道这个到底对不对。
阅读全文
0 0
- Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式
- Vue.js之遍历输出JavaScript的常见数据类型(v-for)
- JavaScript数组遍历的几种方式
- Javascript中遍历数组的几种方式?!
- 浅谈Vue.js中v-for,javascript中for in 输出键值对的区别
- Vue常用指令v-for
- Vue实践--V-for指令
- 使用vue中的v-for遍历二维数组
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- 8-Vue指令之列表渲染 V-for
- 遍历JSON几种方式
- java抽象类练习题
- A query was run and no Result Maps were found for the Mapped Statement
- Python之列表和元组
- Selemium定位元素
- 最简单的本地加载图片无限自动轮播
- Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式
- python中变量,函数,类之小总结
- java 实现二进制与十进制的转换
- java八种基本数据类型
- 515. Find Largest Value in Each Tree Row
- Python基础第四课
- jmeter 初识 no cookies
- python基础知识总结
- HDU 1157 Who's in the Middle