vue tab选项卡

最新推荐文章于 2025-10-19 09:42:10 发布

转载最新推荐文章于 2025-10-19 09:42:10 发布 · 394 阅读

vue 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个简单的Vue.js示例介绍了如何实现动态Tab切换功能。该示例使用了Vue.js的基本语法和特性，包括组件注册、动态绑定以及事件处理等。通过点击不同的按钮可以切换显示不同的Tab内容。

转载于：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>