<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <component :is="num"></component> <button @click="fn(1)">按钮1</button> <button @click="fn(2)">按钮2</button> <button @click="fn(3)">按钮3</button> <button @click="fn(4)">按钮4</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', components:{ com1:{ template:`<h1>这是首页</h1>` }, com2:{ template:`<h1>这是详情页</h1>` }, com3:{ template:`<h1>这是购物车</h1>` }, com4:{ template:`<h1>这是登录注册</h1>` }, }, data:{ num:'com1' }, methods:{ fn(num){ this.num='com'+num } } }) </script> </html>