代码主要功能:点击按钮,更新第一条数据
<div id="root">
<button @click="updata">更新周冬雨的信息button>
<ul>
<li v-for="p in persons" :key="p.id">
{
{p.name}}---{
{p.age}}
li>
ul>
div>
var vm = new Vue({
el:"#root",
data:{
persons:[
{
id:"001", name:"周冬雨", age:19},
{
id:"002", name:"周杰伦", age:30},
{
id:"003", name:"夏雨", age:2},
{
id:"004", name:"温兆伦", age:22}
]
},
methods: {
updata(){
this.persons[0].name = "周老师"
this.persons[0].age = 40
}
}
})
分批对一个对象的属性进行修改,这样产生的效果是对的,但是我们修改一整条数据(对象),并没有产生我们预想中的效果
var vm = new Vue({
el:"#root",
data:{
persons:[
{
id:"001", name:"周冬雨", age:19},
{
id:"002", name:"周杰伦", age:30},
{
id:"003", name:"夏雨", age:2},
{
id:"004", name:"温兆伦", age:22}
]
},
methods: {
updata(){
this.persons[0] = {
id:"001", name:"周老师", age:40}
}
}
})
在Vue的设计中对对象的数据进行了一个递归,查找对象中的每一个属性,并且对其进行数据代理,给每一个属性设有get
和set
方法,这样子当对象中的数据发生改变,那么Vue就会察觉并修改页面中的数据
如需给后添加的属性做响应式,请使用如下API:
vm为Vue对象
Vue.set(target, propertyName/index, value)
或
vm.$set(target, propertyName/index, value)
通过包裹数组更新元素的方式实现,本质就是做了两件事:
在修改数组的时候,我们只有通过数组的修改方法才能,修改方法有push
、pop
、shift
、unshift
、splice
、sort
、reverse
注意:Vue.set()和vm.set() 不能给vm或者vm的根数据对象添加属性