<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
<!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>
