一.语法
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>
三.效果
原始页面
点击删除后
点击更新后
网友评论