<!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>