vue tab选项卡

关注

转载最新推荐文章于 2026-07-26 22:04:59 发布 431 阅读 AI 写同款· GEO 优化 ›

【vue案例】vue实现tab选项卡 vue实现tab选项卡 文章目录vue实现tab选项卡一、效果图展示二、静态页面结构csshtmljavascript三、vue实现1、将静态结构和样式重构为基于vue模板语法的形式vue实现ul标签渲染2、处理事件绑定和js控制逻辑vue实现点击切换四、完整代码一、效果图展示实现的效果图如下：二、静态页面结构 css <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .tab { wi 阅读详情

转载于：https://cn.vuejs.org/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="app">
        <component v-bind:is="tabShow"></component>
        <button @click="tab('A')">tab1</button>
        <!-- <button v-on:click="tab('A')">tab1</button> -->
        <button @click="tab('B')">tab2</button>
        <button @click="tab('C')">tab3</button>
        <button @click="tab('D')">tab4</button>
    </div>


</body>
</html>
<script>

      A = {
        template:`<h1>我是第一一一个tab</h1>`
      }
      B = {
        template:`<h1>我是第二二二个tab</h1>`
      }
      C = {
        template:`<h1>我是第三三三个tab</h1>`
      }
      D = {
        template:`<h1>我是第四四四个tab</h1>`
      }

      new Vue({
        el:'#app',
        data(){
          return {
            tabShow:'A'
          }
        },
        components:{
            'A': A,
            'B': B,
            'C': C,
            'D': D
        },
        methods:{
            tab(currentShowTab){
                this.tabShow = currentShowTab;
            }
        }

      })

</script>