Vue.set的使用

这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据。

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

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

key:要更改的具体数据

value :重新赋的值

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><divid="app2"><pv-for="item in items":key="item.id">{{item.message}}</p><buttonclass="btn"@click="btn2Click()">动态赋值</button>
<buttonclass="btn"@click="btn3Click()">为data新增属性</button></div><scriptsrc="../../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.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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据。调用方法:Vue.set( target, key...
    大眼袋阿姨阅读 116,759评论 3 20
  • 这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据。 首先在列表中动态新增一条数据: 这是我点击之前的...
    洛禾sunshime阅读 6,889评论 0 0
  • 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新...
    Yixi_Li阅读 2,905评论 0 0
  • 在工作中,我做了一个上传文件完毕时,让上传行闪一下的css样式,需要用到obj.blink让其blink样式效果在...
    一个废人阅读 5,419评论 0 0
  • 前言 记录平时学到的知识,标题写的大气一点,也算是给自己一点鼓励,希望在技术这条路可以远走越远,路越走越宽~ 文中...
    徐国军_plus阅读 5,579评论 3 28