vue实例之组件开发：多标签切换组件/tabs切换组件

一、自定义方式：

定义组件Tabs.vue

<template>
  <div class="tabs">
      <button v-for="(tab, key) in tabs" :key="key" @click="index=key" :class="{'active': key==index}">{{tab}}</button>
      <ul>
        <li v-for="(content, key) in contents" :key="key" v-show="key==index">{{content}}</li>
      </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        index: 0
      }
    },
    props: ["tabs", "contents"]
  }
</script>

<style scoped="">
.tabs{

}
.tabs button{
  width: 60px;
  height: 30px;
  line-height: 20px;
  cursor: pointer;
}
.tabs button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tabs button:hover {
  background: #e0e0e0;
}
.tabs button.active {
  background: #e0e0e0;
}
.tabs ul{
  padding: 0;
  margin: 0;
}
.tabs li{
  list-style-type: none;
  margin: 0;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

使用组件Tabs.vue

<template>
  <div>
    <Tabs :tabs="tabs" :contents="contents"></Tabs>
  </div>
</template>

<script>
import Tabs from './Tabs'
export default {
  data() {
    return {        
      tabs: ["post", "get", "patch"],
      contents: ["content1", "content2", "content3"]
    }
  },
  components: {
    Tabs
  }
};
</script>

<style scoped="">

</style>