Vue2.0 Vue.set的使用

最新推荐文章于 2024-10-11 15:21:46 发布

转载最新推荐文章于 2024-10-11 15:21:46 发布 · 209 阅读

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了Vue.js中Vue.set()方法的使用方式及其参数说明。通过示例代码展示了如何利用Vue.set()来动态添加或更新Vue实例中的数据，包括对数组和对象的操作。

Vue.set() 响应式新增与修改数据

此时我们需要知道Vue.set()需要哪些参数，官方API：Vue.set()

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

案例：

<!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8"> 
<title></title> 
</head>
 <body> 
<div id="app2">
 <p v-for="item in items" :key="item.id"> {{item.message}} </p>
 <button class="btn" @click="btn2Click()">动态赋值</button><br/><br/> 
<button class="btn" @click="btn3Click()">为data新增属性</button>
 </div> <script src="../../dist/vue.min.js"></script>
 <script> var vm2=new Vue({
 el:"#app2", 
data:{ 
items:[
 {message:"Test one",id:"1"},
 {message:"Test two",id:"2"}, 
{message:"Test three",id:"3"}
 ]
 }, 
methods:{
 btn2Click:function(){ //Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到items Vue.set(this.items,0,{message:"Change Test",id:'10'}) }, 
btn3Click:function(){ 
var itemLen=this.items.length; 
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen}); } } }); 
</script>
 </body> 
</html>

Tip:Vue.set()在methods中也可以写成this.$set()

原文地址：https://blog.youkuaiyun.com/qq_30455841/article/details/78666571