Vue练习十三：02_07_简易选项卡

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

<template>
  <div id="app">
    <div class="outer">
      <ul class="tab">
        <li v-for="(lesson,index) in lessons" :key="lesson.name" :class="{current:lesson.isActive}"
        @mouseover="handleOver(index)"
        >
          {{lesson.name}}
        </li>
      </ul>
    <div class="content" >
      <ul v-for="(lesson, index) in lessons" :key="index" :class="{current:lesson.isActive}">
        <li v-for="content in lesson.content" :key="content">
          {{content}}
        </li>
      </ul>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      lessons:[
        {
          name:'第一课',
          content:[
          '网页特效原理分析',
          '响应用户操作',
          '提示框效果',
          '事件驱动',
          '元素属性操作',
          '动手编写第一个JS特效',
          '引入函数',
          '网页换肤效果',
          '展开/收缩播放列表效果'
          ],
          isActive:true
        },
        {
          name:'第二课',
          content:[
          '改变网页背景颜色',
          '函数传参',
          '高重用性函数的编写',
          '126邮箱全选效果',
          '循环及遍历操作',
          '调试器的简单使用',
          '典型循环的构成',
          'for循环配合if判断',
          'className的使用',
          'innerHTML的使用',
          '戛纳印象效果',
          '数组',
          '字符串连接'
          ],
          isActive:false
        },
        {
          name:'第三课',
          content:[
          'JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源',
          'JavaScript出现的位置、优缺点',
          '变量、类型、typeof、数据类型转换、变量作用域',
          '闭包：什么是闭包、简单应用、闭包缺点',
          '运算符：算术、赋值、关系、逻辑、其他运算符',
          '程序流程控制：判断、循环、跳出',
          '命名规范：命名规范及必要性、匈牙利命名法',
          '函数详解：函数构成、调用、事件、传参数、可变参、返回值',
          '定时器的使用：setInterval、setTimeout',
          '定时器应用：站长站导航效果',
          '定时器应用：自动播放的选项卡',
          '定时器应用：数码时钟',
          '程序调试方法'
          ],
          isActive:false
        }
      ]
    }    
  },
  methods:{
    handleOver(index){
      for(var i=0;i<this.lessons.length;i++) this.lessons[i].isActive=false;
      this.lessons[index].isActive=true;
    }
  }
}
</script>