v-for遍历数组和对象

一.语法


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>