对数组和对象进行遍历和修改
1、对数组进行循环
v-for进行循环，有两个参数（item，index）
注意：template可以成为占位符，在DOM里面不显示
2、 修改数组的时候，不能直接通过下标去增加修改删除
（1）可以用过push/pop/shift/unshift/splice/sort/reverse方法
（2）也可以直接改变（重新定义）list数组的整体 （var list = [ ]）
（3）全局的Vue.set(app7.list,1<此处代表下标>,2)
局部的app7.$set(app7.list,1<此处代表下标>,2)
3、对对象进行循环
v-for进行循环，有三个参数（item，index，key）
4、增加对象的时候
（1）通过重新定义引用的对象 （var obj = { }）
（2）set方法 全局的Vue.set(app7.obj,“sex”<此处代表要增加的属性>,“女”)
局部的app7.$set(app7.obj,“sex”<此处代表要增加的属性>,“女”)
<!-- v-for的使用 -->
<div id="app7">
// 对数组进行循环
<template v-for="(item,index) of list" :key="item.id">
<div>
{{item.text}} ---- {{index}}
</div>
<span>
{{item.text}} ---- {{index}}
</span>
</template>
//对对象进行循环
<template v-for="(item,index,key) of obj">
<div>
{{item}} ---- {{index}}-----{{key}}
</div>
</template>
</div>
<script>
var app7 = new Vue({
el: '#app7',
data: {
list: [
{
id: "1",
text: '1'
},
{
id: "2",
text: '2'
},
{
id: "3",
text: '3'
},
],
obj: {
name: 'mao',
age: 28,
address: 'liulin'
}
}
})
</script>
修改数组和对象的特殊情况以及修改方法
div部分
<div id="root">
{{title}}
<my-header></my-header>
{{list}}
{{obj}}
</div>
<div id="app">
{{title}}
</div>script部分
<script>
// 全局定义的组件
Vue.component('my-header', {
template: `
<header>title</header>
`
})
// 实例化Vue
var vm = new Vue({
el: '#root',
data: {
title: 'hello',
list: ['a', 'b'],
obj: {
x: 0
}
}
})
var vm2 = new Vue({
el: '#app',
data: {
title: 'world'
}
})
</script>修改数组的两个特殊情况
1.arr.length = 0, 不具备响应特性
2.arr[0] = 100, 不具备响应特性
- 修改对象的特殊情况
- 添加obj.x，x属性，也不具备响应特性
修补方法
vm.$set(target, propertyName/index, value)//实例化一个vue，试用贴set属性改变对应的value值 Vue.set(target, propertyName/index, value)//直接使用vue的属性，要与实例化vue方法区分，这个没有$ vm.$forceupdate()
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。