今天小编就为大家分享一篇使用Vue.set()方法实现响应式修改数组数据步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在页面中显示数组数据本文来源gaodai#ma#com搞@@代~&码*网/时发现了一个问题，当在methods方法中修改数组数据后，虽然数组已经发生改变，但是改变后的数据并没有渲染到页面上。这是因为在VUE中，如果在实例创建之后添加新的属性或者改变属性到实例上，它将不会触发视图更新。
而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的，同时触发视图更新，动态响应数据的变化。
用法如下：
Vue.set(object,index,value)
object:要更改的数据源（数组或对象）
index：数据的索引（第几项）
value：修改后的值
实例
<div> <div class="student"> <span> <span>小五</span></span><span><button>{{item}}</button></span></div></div>
该页面的考勤情况数据来源于一个数组，点击以后，考勤情况将会发生改变。
data(){ return{ id:1, state:['未知','未知','未知','未知','未知','未知','未知','未知','未知'] } }, methods:{ attence:function(num){ if(this.state[num]=='未知'){ Vue.set(this.state,num,'出勤'); } else if(this.state[num]=='出勤'){ Vue.set(this.state,num,'请假'); } else if(this.state[num]=='请假'){ Vue.set(this.state,num,'缺勤'); } else if(this.state[num]=='缺勤'){ Vue.set(this.state,num,'未知'); } } }
在这段代码中，数组中的数据初始值全都是未知，点击按钮以后，attence（）方法会根据传入的参数改变数组中的值，传入的参数是几就改变第几项的数据。页面将会及时对数据变化作出响应，渲染出来。
注：该方法也可用来增加数据，只需将第二项的索引值赋为数组的长度，第三项为增加的数据值。
以上就是使用Vue.set()方法实现响应式修改数组数据步骤的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用Vue.set()方法实现响应式修改数组数据步骤
转载请注明原文链接：使用Vue.set()方法实现响应式修改数组数据步骤
