<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click="chooseContent(1)">首页</button>
<button @click="chooseContent(2)">列表</button>
<button @click="chooseContent(3)">新闻</button>
<button @click="chooseContent(4)">个人</button>
<div id="content">
<!-- 组件会在 `com` 改变时改变 -->
<component :is="com"></component>
</div>
</div>
<script type="text/x-template" id="laochen">
<div>
<h1>首页内容</h1>
<p>Hello hello hello vue</p>
</div>
</script>
<script type="text/javascript">
let com1 = Vue.component("index-com", {
name: 'index',
template: '#laochen'
})
let com2 = Vue.component("list-com", {
template: '<div><h1>列表内容</h1><p></p></div>'
})
let com3 = Vue.component("news-com", {
template: '<h1>新闻内容</h1>'
})
let com4 = Vue.component("me-com", {
template: '<h1>个人中心内容</h1>'
})
let app = new Vue({
el: "#app",
data: {
com: com1
},
methods: {
chooseContent: function (id) {
console.log(id)
console.log(this)
//通过获取id,选择注册好的组件
this.com = this.$options.components['com' + id]
}
},
components: {
com1, com2, com3, com4
}
})
</script>
</body>
</html>