一、v-for
1、遍历数组，参数(item,index) in list
<div id="app"> <ul> <li v-for="item in list"> {{item.name}} </li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { list:[{ id: 1, name: "李白" }, { id: 2, name: "杨玉环" }, { id: 3, name: "西施" }, { id: 4, name: "貂蝉" }, { id: 5, name: "王昭君" }] } }) </script>
2、遍历对象，参数(value,key,index) in obj
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .li1 { background: orange; } .li2 { background: red; } </style> <ul> <li v-for="(value,key,index) in user">对象的键()：{{key}},对象的值：{{value}}, 数组的下标{{index}}</li> </ul> <script> var vm = new Vue({ el: '#app', data: { message: 'HelloVue!', user: { userId: 19, name: '测试name', age: 18 }, }, methods: { add() { this.list.unshift({ userId: 10, name: "新来的" }) } }, }) </script>
3、遍历数字，i in 10(1~10)
<div id='app'> <ul> <li v-for="i in 10">{{i}}</li> </ul> </div> <script> const vm = new Vue({ el: '#app', data: { } }) </script>
4、key在使用v-for的时候都需要去设置key
1、让界面元素和数组里的每个记录进行绑定
2、key只能是字符串或者数字
3、key必须是唯一的
例子 v-for实现隔行换色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .li1 { background: orange; } .li2 { background: red; } </style> </head> <body> <div id="app"> <h1>v-for的key(实现隔行变色)</h1> <button @click='add'>add</button> <ul> <li v-for='(item,index) in list' :class="index%2? 'li1' : 'li2'" :key='item.id'> <input type="checkbox">{{item.name}}数组的下标{{index}} </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: 'HelloVue!', list: [{ id: 1, name: '诸葛亮' }, { id: 2, name: '刘备' }, { id: 3, name: '关羽' }, { id: 4, name: '张飞' }, { id: 5, name: '赵云' } ] }, methods: { add() { this.list.unshift({ userId: 10, name: "新来的" }) } }, }) </script> </html>