vue动态组件

最新推荐文章于 2020-12-21 22:09:27 发布

ヽ错落不堪的年华。

最新推荐文章于 2020-12-21 22:09:27 发布

阅读量123

点赞数

分类专栏：技术交流技术总结前端文章标签： vue js

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <title>Dynamic Components Example</title>
  <script src="https://unpkg.com/vue"></script>
  <style>
    .tab-button {
      padding: 6px 10px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border: 1px solid #ccc;
      cursor: pointer;
      background: #f0f0f0;
      margin-bottom: -1px;
      margin-right: -1px;
    }

    .tab-button:hover {
      background: #e0e0e0;
    }

    .tab-button.active {
      background: #e0e0e0;
    }

    .tab {
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div id="dynamic-component-demo" class="demo">
    <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]"
      v-on:click="currentTab = tab">
      {{ tab }}
    </button>

    <component v-bind:is="currentTabComponent" class="tab"></component>
  </div>

  <script>
    Vue.component("tab-home", {
      template: "<div>Home component</div>"
    });
    Vue.component("tab-posts", {
      template: "<div>Posts component</div>"
    });
    Vue.component("tab-archive", {
      template: "<div>Archive component</div>"
    });

    new Vue({
      el: "#dynamic-component-demo",
      data: {
        currentTab: "Home",
        tabs: ["Home", "Posts", "Archive"]
      },
      computed: {
        currentTabComponent: function () {
          return "tab-" + this.currentTab.toLowerCase();
        }
      }
    });
  </script>
</body>

</html>

ヽ错落不堪的年华。

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head> <title>Dynamic Components Example</title> <script src="https://unpkg.com/vue"></script> <style> .tab-button { padding: 6px 10px; border-top-left-radius: 3p
复制链接

扫一扫