vue.js之v-for

v-for 指令（列表渲染）

list是数组

 <div id="app">   <div v-for="item in list">{{item}}</div> </div> <script> let app = new Vue({    el:"#app",    data:{        list:['Tom','John','Lisa']    } }); </script>

---

v-for 还支持一个可选的第二个参数为当前项的索引。

<div id="app">    <div v-for="(item,index) in list">{{index}}.{{item}}</div></div><script>    let app = new Vue({        el: "#app",        data: {            list: ['Tom', 'John', 'Lisa']        }    });</script>

---

list是对象

<div id="app">    <div v-for="item in list">{{item}}</div></div><script>    let app = new Vue({        el: "#app",        data: {            list: {                name:"Tom",                age:20,                sex:"man"            }        }    });</script>

---

第二个参数为键名：

<div id="app">    <div v-for="(item,key) in list">{{key}}:{{item}}</div></div><script>    let app = new Vue({        el: "#app",        data: {            list: {                name:"Tom",                age:20,                sex:"man"            }        }    });</script>

---

第三个参数为索引：

<div id="app">    <div v-for="(item,key,index) in list">{{ index }}.{{key}}:{{item}}</div></div><script>    let app = new Vue({        el: "#app",        data: {            list: {                name:"Tom",                age:20,                sex:"man"            }        }    });</script>