Vue如何实现简单选项卡功能

这篇文章将为大家详细讲解有关Vue如何实现简单选项卡功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

vue-tab-demo

App.vue

<template>
  <div id="app">
    <Tab/>
  </div>
</template>

<script>
import Tab from './components/Tab'

export default {
  name: 'App',
  components: {
    Tab
  }
}
</script>

<style>
  ul, li {
    list-style: none;
  }
  .clearfix {
    zoom: 1;
  }
  .clearfix:after {
    display: block;
    content: '';
    clear: both;
  }
</style>

先布局，写好样式
Tab.vue

<template>
<div id="tab">
  <div class="tab-bar clearfix">
    <a href="javascript:;">HTML</a>
    <a href="javascript:;">CSS</a>
    <a href="javascript:;">JavaScript</a>
    <a href="javascript:;" class="active">Vue</a>
  </div>
  <div class="tab-con">
    <div>HTML</div>
    <div>CSS</div>
    <div>JavaScript</div>
    <div class="light">Vue</div>
  </div>
</div>
</template>

<script>
export default {
    data () {
      return {

      }
    },
    methods: {

    }
}
</script>

<style scoped>
#tab {
  width: 400px;
  border: 1px solid #ccc;
  margin: 60px auto 0;
}
.tab-bar {
  width: 400px;
  background-color: #ccc;
}
.tab-bar a {
  float: left;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: #000;
}
.tab-con div {
  text-align: left;
  height: 100px;
  display: none;
}


.tab-bar .active {
  background-color: #0099ff;
}
.tab-con .light {
  display: block;
}
</style>

渲染数据后，上面Tab.vue修改后如下：

<template>
  <div id="tab">
    <div class="tab-bar clearfix">
      <a href="javascript:;"
         @click="tab(index)"
         v-for="(item,index) in items"
         :class="{active : index===curId}"
      >{{item.item}}</a>
    </div>
    <div class="tab-con">
      <div
        v-show="index===curId"
        v-for="(content, index) in contents" >{{content.content}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        curId: 0,
        items: [
          {item: 'HTML'},
          {item: 'CSS'},
          {item: 'JavaScript'},
          {item: 'Vue'},
        ],
        contents: [
          {content: 'HTML'},
          {content: 'CSS'},
          {content: 'JavaScript'},
          {content: 'Vue'},
        ]
      }
    },

    methods: {
      tab (index) {
        this.curId = index;
      }
    }
  }
</script>

<style scoped>
  #tab {
    width: 400px;
    border: 1px solid #ccc;
    margin: 60px auto 0;
  }
  .tab-bar {
    width: 400px;
    background-color: #ccc;
  }
  .tab-bar a {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #000;
  }
  .tab-bar .active {
    background-color: #0099ff;
  }
  .tab-con div {
    text-align: left;
    height: 100px;
  }

</style>

关于“Vue如何实现简单选项卡功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。