Vue练习十四：02_08_简易js年历

Demo 在线地址：
https://sx00xs.github.io/test/14/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<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:'端午节：6月4日至6日放假3天。',
    calendar:[
      {
        id:0,
        val:'JAN',
        message:'元旦：1月1日至3日放假三天。',
        isActive:false
      },
      {
        id:1,
        val:'FER',
        message:'春节：2月2日至8日放假7天。',
        isActive:false
      },
      {
        id:2,
        val:'MAR',
        message:'妇女节：3月8日妇女节，与我无关。',
        isActive:false
      },
      {
        id:3,
        val:'APR',
        message:'清明节：4月3日至5日放假3天',
        isActive:false
      },
      {
        id:4,
        val:'MAY',
        message:'劳动节：4月30日至5月2日放假3天。',
        isActive:false
      },
      {
        id:5,
        val:'JUN',
        message:'端午节：6月4日至6日放假3天。',
        isActive:true
      },
      {
        id:6,
        val:'JUL',
        message:'小暑：7月7日小暑。不放假。',
        isActive:false
      },
      {
        id:7,
        val:'AUG',
        message:'七夕节：8月6日七夕节。不放假。',
        isActive:false
      },
      {
        id:8,
        val:'SEP',
        message:'中秋节：9月10日至12日放假3天。',
        isActive:false
      },
      {
        id:9,
        val:'OCT',
        message:'国庆节：10月1日至7日放假7天。',
        isActive:false
      },
      {
        id:10,
        val:'NOV',
        message:'立冬：11月8日立冬。不放假。',
        isActive:false
      },
      {
        id:11,
        val:'DEC',
        message:'艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。',
        isActive:false
      },
    ]
        }
  },
  methods:{
    handleOver(id){
      console.log(this.calendar.length);
      for(var i=0;i<this.calendar.length;i++) this.calendar[i].isActive=false;
      this.calendar[id].isActive=true;
      this.mon=this.calendar[id].id + 1;
      this.mes=this.calendar[id].message;
    }
  }
}
</script>