Vue练习二：01_02_网页换肤

Demo 在线地址：

https://sx00xs.github.io/test/2/index.html

-----------------------------------------------------

IDE: vscode

文件格式：.vue

解析：（待补）

<template>
  <div id="app">
    <div class="outer">
      <ul class="skin">
        <li v-for="skin in skins" :key="skin.title"
         :class="[{current:skin.isActive}, skin.cla]"
         :title="skin.title"
         @click="handleChangeSkin(skin.cla)"
        >
          {{skin.value}}
        </li>
      </ul>
      <ul class="nav" :style="{background:activeColor}">
        <li v-for="(nav,index) in navs" :key="nav" :class="{last:index===navs.length-1}">
          <a href="#">{{nav}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      activeColor:'green',
      activeBackground:'#a3c5a8',      
      skins:[
        {
          cla:'red',
          title:'红色',
          value:'red',
          isActive:false
        },
        {
          cla:'green',
          title:'绿色',
          value:'green',
          isActive:true
        },
        {
          cla:'black',
          title:'黑色',
          value:'black',
          isActive:false
        }
      ],
      navs:['新闻','娱乐','体育','电影','音乐','旅游']
    }
  },
  methods:{
    handleChangeSkin(val){
      switch(val){
        case "red":
        for(var i=0;i<this.skins.length;i++){
          this.skins[i].isActive=false;
        }
        for(var i=0;i<this.skins.length;i++){
          if(this.skins[i].cla===val){
            this.skins[i].isActive=true;
          }
        }
        document.body.style.background="#ffdddd";
        this.activeColor='red';
        break;

        case "green":
        for(var i=0;i<this.skins.length;i++){
          this.skins[i].isActive=false;
        }
        for(var i=0;i<this.skins.length;i++){
          if(this.skins[i].cla===val){
            this.skins[i].isActive=true;
          }
        }
        document.body.style.background=this.activeBackground;
        this.activeColor='green';
        break;

        case "black":
        for(var i=0;i<this.skins.length;i++){
          this.skins[i].isActive=false;
        }
        for(var i=0;i<this.skins.length;i++){
          if(this.skins[i].cla===val){
            this.skins[i].isActive=true;
          }
        }
        document.body.style.background="#cccccc";
        this.activeColor='black';
        break;
      }
    }
  }
}
</script>