使用Vue.set()方法实现响应式修改数组数据步骤
更新时间：2019年11月09日 16:40:45 作者：marsur
今天小编就为大家分享一篇使用Vue.set()方法实现响应式修改数组数据步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在页面中显示数组数据时发现了一个问题，当在methods方法中修改数组数据后，虽然数组已经发生改变，但是改变后的数据并没有渲染到页面上。这是因为在VUE中，如果在实例创建之后添加新的属性或者改变属性到实例上，它将不会触发视图更新。
而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的，同时触发视图更新，动态响应数据的变化。
用法如下：
Vue.set(object,index,value)
object:要更改的数据源（数组或对象）
index：数据的索引（第几项）
value：修改后的值
实例
<div v-for="(item,index) in state">
<div class="student">
<span>
<img src="./../../../assets/icon.jpg">
<span>小五</span>
</span>
<span><button @click="attence(index)">{{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()方法实现响应式修改数组数据步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue实现用户没有登陆时，访问后自动跳转登录页面,定义路由的时候配置属性，这里使用needLogin标记访问页面是否需要登录，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vuex的module模块用法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要给大家介绍了关于VUE3引入html文件并传值的相关资料,这是最近在项目中遇到了的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue中的MVVM模式使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue实现锚点跳转之scrollIntoView()方法详解
这篇文章主要介绍了vue实现锚点跳转之scrollIntoView()方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了html中引入Vue.js的cdn实现简单的文档单页示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
vue2和el-input无法修改和写入并且不报错的解决方案
这篇文章主要介绍了vue2和el-input无法修改和写入并且不报错的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
vue.js表单验证插件(vee-validate)的使用教程详解
这篇文章主要介绍了vue.js表单验证插件(vee-validate)的使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
文章介绍了在Element UI的el-select组件中新增自定义按钮的方法,并详细说明了设置`popper-append-to-body`属性为false的重要性,以及如何通过修改样式来实现自定义按钮的添加和样式效果展示,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了vue-better-scroll 的使用实例代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
最新评论