vue-实现简单tab切换

<template>
<div class="bodywrapper" >
     <headertop></headertop>  
     <div class="login_con">
          <div class="login_ways_tab clearfix">
               <ul>
                  <li :class="{ on: ison}"  @click="_loginway()">美团网账号登录</li>
                  <li :class="{ on: !ison}" @click="_loginway()">手机账号登录</li>
               </ul>
          </div>
          <div class="login_ways_con clearfix">
            <div class="con" v-show="ison">
               <p>内容1</p>
            </div>
            <div class="con" v-show="!ison">
               <p>内容2</p>
            </div>
          </div>
          
          
          
     </div>
</div>
</template>


<script>
import headertop from 'components/mt/base/header_top'
export default{
data(){
return{
ison:true
}
},
methods:{
_loginway(){
  this.ison==true?this.ison=false:this.ison=true;
}
},
components:{
headertop
}
}
</script>
<style>
.login_ways_tab{ padding: 0 5%; border-bottom: 2px solid #ddd8ce; height: 40px; box-sizing:border-box}
.login_ways_tab ul{ position: absolute; width: 100%; left: 5%; right: 5%;}
.login_ways_tab li{ width: 50%; height: 40px; float: left; text-align: center; line-height: 40px;box-sizing:border-box; border-bottom: 2px solid #ddd8ce;}
.login_ways_tab li.on{ color: #06c1ae; border-bottom:2px solid #06c1ae}
.login_ways_con{ border:1px solid #c03;}
</style>