Vue Exercise 14: 02_08_ simple js calendar

Demo online address:
https://sx00xs.github.io/test/14/index.html
----------------------------- ----------------------------------
IDE: VSCode
file formats: .vue
resolve to be completed :()

<template>
  <div id="app">
    <div class="calendar">
      <ul>
        <li v-for="item in calendar" :key="item.id" :class="{current:item.isActive}"
        @mouseover="handleOver(item.id)"
        >
          <strong>{{ item.id + 1}}</strong> {{ item.val }}
        </li>
      </ul>
      <div class="msg">
        <h2>
          <strong>{{mon}}</strong>
          月节日
        </h2>
        <p>{{mes}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data:function () {
     return { 
      Mon: '. 6' , 
      MES: 'Dragon Boat Festival: June 4 to 6 3 days holiday. ' , 
    Calendar: [ 
      { 
        the above mentioned id: 0 , 
        Val: ' JAN ' , 
        the Message: ' New Year's Day: January 1 to 3 holiday for three days. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 1 , 
        Val: ' the FER ' , 
        Message: ' New Year: February 2 to 8 holiday 7 days. ' , 
        IsActive: to false 
      }, 
      { 
        ID: 2 ,
        Val: 'MAR' , 
        the Message: 'Women's Day: March 8 Women's Day, nothing to do with me. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 3 , 
        Val: ' the APR ' , 
        Message: ' festival: 3 to 5 April 3 days holiday ' , 
        isActive: to false 
      }, 
      { 
        ID: . 4 , 
        Val: ' MAY ' , 
        Message: ' Day: April 30-May 2 3 days holiday. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 5 ,
        Val: 'JUN' , 
        the Message: 'Dragon Boat Festival: June 4 to 6 3 days holiday. ' , 
        IsActive: to true 
      }, 
      { 
        ID: . 6 , 
        Val: ' JUL ' , 
        Message: ' Slight: Slight July 7. Not a holiday. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 7 , 
        Val: ' the AUG ' , 
        Message: ' Tanabata: August 6 Tanabata. Not a holiday. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 8 , 
        Val: ' the SEP ', 
        Message: 'Mid: 10 to 12 September 3 days holiday. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 9 , 
        Val: ' the OCT ' , 
        Message: ' National Day: 1 to 7 October holiday 7 days. ' , 
        IsActive: to false 
      }, 
      { 
        ID: 10 , 
        Val: ' NOV ' , 
        Message: ' beginning of winter: November 8 beginning of winter. Not a holiday. ' , 
        IsActive: to false 
      }, 
      { 
        ID: . 11 , 
        Val: ' DEC ' ,
        the Message: 'AIDS Day: December 1 <br /> International Day for the Abolition of Slavery: December 2. ' , 
        IsActive: to false 
      }, 
    ] 
        } 
  }, 
  Methods: { 
    handleOver (ID) { 
      the console.log ( the this .calendar.length);
       for ( var I = 0; I < the this .calendar.length; I ++) the this .calendar [I] = .isActive to false ;
       the this .calendar [ID] = .isActive to true ;
       the this .mon = the this .calendar [ID] .id +. 1 ;
       the this .mes = the this .calendar [ID] .message;
    }
  }
}
</script>