vue动态组件

最新推荐文章于 2024-08-07 08:30:00 发布

@、

最新推荐文章于 2024-08-07 08:30:00 发布

阅读量86

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43608642/article/details/117459895

版权

vue动态组件

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Components Example</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
      .demo {
        width: 399px;
        padding: 25px 35px;
        margin-top: 1em;
        margin-bottom: 40px;
        overflow-x: auto;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid #eee;
        border-radius: 2px;
      }
      .tab-button {
        padding: 6px 10px;
        margin-right: -1px;
        margin-bottom: -1px;
        cursor: pointer;
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: lightsteelblue;
      }
      .tab {
        padding: 10px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="item in tabs"
        v-bind:key="item.tab"
        v-bind:class="['tab-button', { active: currentTab === item.tab }]"
        v-on:click="currentTab = item.tab"
      >
        {{ item.text }}
      </button>
      <!-- component标签来决定绑定那个组件 -->
      <component v-bind:is="currentTabComponent" class="tab"></component>
    </div>
    <script>
      Vue.component("tab-home", {
        template: "<div>欢迎您,来到梦幻糖果屋......</div>",
      });
      Vue.component("tab-payment", {
        template: "<div>哇哦！您买了那么多糖果......</div>",
      });
      Vue.component("tab-share", {
        template: "<div>快来分享今天的甜蜜吧......</div>",
      });

      new Vue({
        el: "#dynamic-component-demo",
        data: {
          currentTab: "Home",
          tabs: [
            { tab: "Home", text: "首页" },
            { tab: "Payment", text: "支付" },
            { tab: "Share", text: "分享" },
          ],
        },
        computed: {
          currentTabComponent: function () {
            return "tab-" + this.currentTab.toLowerCase();
          },
        },
      });
    </script>
  </body>
</html>

@、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue动态组件

vue动态组件<!DOCTYPE html><html> <head> <title>Dynamic Components Example</title> <script src="https://unpkg.com/vue"></script> <style> .demo { width: 399px; padding: 25px 35
复制链接

扫一扫