<div v-for="(item,index) in state">
    <div class="student">
    <span>
     <img src="/UploadFiles/2021-04-02/icon.jpg">


该页面的考勤情况数据来源于一个数组，点击以后，考勤情况将会发生改变。


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()方法实现响应式修改数组数据步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。