定义数据:
<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>
输出结果:
html代码:
<div id="test"> <div v-for = "item in list">{{ item }}</div> </div>
输出结果:
html代码:
<div id="test"> <div v-for = "(item,index) in list">{{ item }}的索引值是{{ index }}</div> </div>
输出结果:
html代码:
<div id="test"> <div v-for = "item in web">{{ item }}</div> </div>
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内置变量,可是我没有测出来,且提示有错,不知道这个到底对不对。