一.语法

1.v-for="item in items"返回数组元素

items是源数据数组，item是数组元素迭代的别名。

2. v-for="(item, index) in items" 返回数组元素和索引值

可通过 {{index}} 获取当前元素索引值

3.删除和更新方法都是用到了splice方法

定义：splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

用法：arrayObject.splice(index,howmany,item1,.....,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX：可选。向数组添加的新项目。

注意：splice方法会改变原始数组

splice(index, 1)是按索引删除一条数据

splice(index, 1, p)是按索引增加一条数据p并覆盖，p是形参，真正的数据在更新按钮里面添加了

在遍历对象时发现，以下效果是一样的，因此页面效果和不一定和插值表达式绑定数据的顺序有关

<li v-for="(key,value) in persons[0]"> {{ value }}: {{ key }}</li>

<li v-for="(value,key) in persons[0]"> {{ key }}: {{ value }}</li>

二.代码

<!DOCTYPE html>

<meta charset="utf-8"/>

<title>v-for

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">

<div id="demo">

<h2>测试: v-for遍历数组

<li v-for="(p, index) in persons" :key="index">

{{index}}--{{p.name}}--{{p.age}} -

<button @click="deleteItem(index)">删除

-

<button @click="updateItem(index, {name:'Jok',age:15})">更新

<h2>测试: v-for遍历对象

<li v-for="(value,key) in persons[0]"> {{ key }}: {{ value }}

<script type="text/javascript">

new Vue({

el:'#demo',

data: {

persons: [

{id:1, name:'Tom', age:13},

{id:2, name:'Jack', age:12},

{id:3, name:'Bob', age:14}

]

},

methods: {

deleteItem(index) {

this.persons.splice(index, 1)

},

updateItem(index, p) {// this.persons[index] = p //页面不会更新

this.persons.splice(index, 1, p)

}

}

})

</html>