导航切换

一，

   HTML

<ul ref='parant' class="uploadaa">
<li v-for="(item,index) in Calligraphy" :class="{active:index==current}" :key="index" @click="changeBgc(item,index)">
<a>
<div class="content">
<img :src="item.charurl"/>
<span v-if="item.sourcetype=1">语文</span>
-<span>{{item.sectionname}}</span>----
<span>{{item.charname}}</span>
</div>
</a>
</li>
</ul>

二，

  script

export default{
  name:'app',
  data(){
    current:0,
    Calligraphy:[

     ]   //渲染数据
  }，
  methods:{
      changeBgc(item,index){
         this.current=index;
      }
  }
}

三，css

ul.uploadaa{
  padding-top: 20px;
  li {
    list-style: none;
    float: left;
    background: #FFFFFF;
    margin:0 14px;
   }
 .active{
   img{
     border: 2px solid #0090FF;
   }
  span{
   color:#0090FF;
  }
 }
}