温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-03-01 14:14:13 来源:亿速云 阅读:194 作者:小新 栏目:开发技术

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

具体内容如下

vue-tab-demo

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

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>

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

渲染数据后,上面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如何实现简单选项卡功能

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI