全局API之Vue.set 监听数据层的数据变化
Vue.set`
Vue的核心具有一套响应式系统,简单来说就是通过监听器监听数据层的数据变化,当数据改变后,通知视图也自动更新。
Vue.set
用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
如果数据源是数组
第一个参数是数组,第二个是索引,第三个是索引对应的值
格式:this.$set(target,index,value)
格式1:this.$set(this.数组名,索引,值)
格式2:this.$set(this.数组名.push("添加的值"))
例题练习
要求:点击一下添加按钮,就会在数组最后一位的基础上加1,添加到数组里,并实时显示到页面上
<!--点击一下添加按钮,就会在数组最后一位的基础上加1,添加到数组里,并实时显示到页面上-->
<body>
<div id="app">
<button @click="adds">添加</button>
<button @click="update">修改</button>
<p v-for="value in itme"> {{value}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
num:2,
itme:[1,2]
},
methods:{
adds(){
this.num++
this.$set(this.itme.push(this.num))
},
update(){
//把数组itme下标为0的值修改成了"数组下标为0的变成了我!"
this.$set(this.itme,0,"数组下标为0的变成了我!")
}
}
})
</script>
</body>
如果数据源是对象
第一个参数是对象,第二个是属性名,第三个是属性对应的值
格式:Vue.set(target,"key",value)
格式1:Vue.set(vm.对象名,"对象属性",对象值)
格式2:this.$set(this.对象名,"对象属性",对象值)
例题练习
要求:点击一下修改按钮,就会更改对象里的数据,并实时显示到页面上
<!--点击一下修改按钮,就会更改对象里的数据,并实时显示到页面上-->
<body>
<div id="app">
<button @click="update">修改</button>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>{{stundent.name}}</td>
<td>{{stundent.sex}}</td>
<td>{{stundent.age}}</td>
</tr>
</table>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
stundent:{
name:"张三",
sex:"女",
age:18
}
},
methods:{
update(){
//使用this一定要加上$符号
this.$set(this.stundent,"name","李四")
//Vue不用加$符号,vm就是本题的vue对象
Vue.set(vm.stundent,"sex","男")
Vue.set(this.stundent,"age",30)
}
}
})
</script>
</body>