vue小案例之一

<template>
  <div class="hello">
    <ul class="tab-list">
      <li><a href="javascript:void(0)" @click="curId=0" :class="{'cur':curId===0}">html</a></li>
      <li><a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a></li>
      <li><a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a></li>
      <li><a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a></li>
    </ul>
    <div class="tab-con">
      <div v-show='curId===0'>html</div>
      <div v-show='curId===1'>css</div>
      <div v-show='curId===2'>javascript</div>
      <div v-show='curId===3'>vue</div>
    </div>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
     curId: 0
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{width: 600px;margin: 0 auto;}
ul {list-style-type: none;padding: 0;width: 600px}
li a{display: inline-block;height: 40px;line-height: 40px;font-size: 16px;width: 25%;text-align: center;background: #ccc;color: #333;text-decoration: none;float: left;}
a.cur{background: #09f;color: #fff;}
.tab-con div{border: 1px solid #ccc;height: 400px;padding-top: 20px;}
</style>

效果图如下