在线代码编辑器-开发工具-核心编程

<div id="app">
       <div>
           <button type="button" v-on:click="currentTab='tab-home'">Home</button>
           <button type="button" v-on:click="currentTab='tab-posts'">Posts</button>
           <button type="button" v-on:click="currentTab='tab-archive'">Archive</button>
       </div>
       <div style="border:solid 1px #000;padding:20px;">
           
           <keep-alive>
               
               <component v-bind:is="currentTab"></component>
           </keep-alive>
       </div>
   </div>

Vue.component("tab-posts", {
           template: `
               <div>
                   <input type="checkbox" />
                   Posts component
               </div>
           `
       });

Vue.component("tab-archive", {
           template: `
               <div>
                   <input type="checkbox" />
                   Archive component
               </div>
           `
       });

var app = new Vue({
           el: "#app",
           data: {
               currentTab: "tab-home"
           }
       });
   </script>

</body>
</html>

在线代码编辑器 HTML / CSS / JavaScript 实时预览

更多工具

自动执行

代码编辑区

字符数: 0 提示: 输入完整的 HTML 代码，需包含 DOCTYPE 声明与 html 根标签

预览效果

选择模板

选择库和版本

库

版本

文件