zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    pytorch实现BiLSTM+CRF用于NER(命名实体识别)
    pytorch中如何处理RNN输入变长序列padding
    pytorch nn.LSTM()参数详解
    Pytorch的LSTM的理解
    转:pytorch版的bilstm+crf实现sequence label
    【Tensorflow】tf.nn.atrous_conv2d如何实现空洞卷积?膨胀卷积
    iOS iphone5屏幕适配 autosizing
    IOS文件存储小结
    IIS6_IIS7日志文件位置
    xcode中没有autoSizing的设置
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11266011.html
Copyright © 2011-2022 走看看