<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 60px;
height: 30px;
font-size: 16px
}
.content {
width: 200px;
height: 100px;
border: 1px solid green;
margin-top: 5px;
}
</style>
</head>
<body>
<div id='app'>
<div id="left">
<ul>
<li>
<a href='#' @click.prevent='conName="patient"'>我的病人</a>
</li>
<li>
<a href='#' @click.prevent='conName="Medical records"'>电子病历</a>
</li>
</ul>
</div>
<div id="right">
<div>
</div>
</div>
<component :is="conName"></component>
</div>
</body>
<script src='./js/vue.js'></script>
<script>
// 创建登陆，注册组件
Vue.component('patient', {
template: `
<div>
<p>这是我的病人页面</p>
</div>`
})
Vue.component('Medical records', {
template: `
<div>
<p>这是我的病历页面</p>
</div>`
})
Vue.component('details', {
template: `
<div>
<p>这是我的详情页面</p>
</div>`
})
Vue.component('list', {
template: `
<div>
<p>这是我的列表页面</p>
</div>`
})
Vue.component('patient', {
data () {
return {
conName2: 'details'
}
},
template: `
<div>
<a href='#' @click.prevent='conName2="details"'>详情信息</a>
<a href='#' @click.prevent='conName2="list"'>病人列表</a>
<component :is="conName2"></component>
</div>`
})
var app = new Vue({
el: '#app',
data: {
// true 登陆；false 注册
flag: false,
conName: 'patient' // 当前的conName 就是 component中的：is绑定的组件的名称
}
})
// 总结：如果页面中出现多个组件来回切换的效果，比如百度首页的导航的切换，就可以使用 <component :is='"组件的名称"'></component>
</script>
</html>