目录
列表渲染
复杂数据
v-for与对象
列表渲染
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
<template><div><p v-for="item in names">{{ item }}</p></div></template><script>export default {data() {return {names:["百战程序员", "尚学堂", "IT"]}}} </script>复杂数据
大多数情况，我们渲染的数据源来源于网络请求，也就是JSON格式
<template><div v-for="item in result"><p>{{ item.title }}</p><img :src="item.avator" alt=""></div></template><script>export default {data() {return {result:[{"id": 2261677,"title": "鄂尔多斯|感受一座城市的璀璨夜景 感受一座城市，除了白日里的车水马龙，喧嚣繁华之","avator": "https://pic.qyer.com/avatar/002/25/77/30/200?v=1560226451"},{"id": 2261566,"title": "成都这家洞穴暗黑风咖啡厅酷毙了!!早C晚A走起成都天气这么热咖","avator": "https://pic.qyer.com/avatar/011/07/08/69/200?v=1572185180"},{"id": 2261662,"title": "【川西新龙-措卡湖】措卡湖，意为“乱石从中的黑色海水”，神秘小众 原汁原味。深","avator": "https://pic.qyer.com/avatar/009/88/48/58/200?v=1507386782"}]}}} </script>v-for也支持使用可选的第二个参数表示当前项的位置索引
<template><div><p v-for="(item, index) in names">{{ index }}:{{ item }}</p></div></template><script>export default {data() { return {names:["百战程序员", "尚学堂", "IT"]}}} </script>也可以使用of作为分隔符来替代in，这更接近 JavaScript 的迭代器语法
<div v-for="item of items"></div>v-for与对象
也可以使用v-for来遍历一个对象的所有属性
<template><div><p v-for="(value, key, index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p></div></template><script>export default {data() { return {userInfo: {name: "iwen",age: 20,gender: "男"}}}} </script>