使用Vue.set()方法实现响应式修改数组数据步骤

   <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,'未知');
     }
    }
   }