<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ 100%; height: 100%; } footer ul { display: flex; position: fixed; left: 0px; bottom: 0px; 100%; height: 40px; } footer ul li { flex: 1; text-align: center; list-style: none; height: 40px; line-height: 40px; background: gray; color:white; } </style> <script type="text/javascript" src="lib/vue.js"></script> </head> <body> <div id="box"> <!-- <home v-show=" which=== 'home' "></home> <list v-show=" which=== 'list' "></list> <shopcar v-show=" which=== 'shopcar' "></shopcar> --> <keep-alive> <component :is="which"></component> </keep-alive> <footer> <ul> <li @click=" which='home' "> 首页 </li> <li @click=" which='list' "> 列表 </li> <li @click=" which='shopcar' "> 购物车 </li> </ul> </footer> </div> <script type="text/javascript"> Vue.component("home",{ template:` <div> home <input type="search"/> </div> ` }) Vue.component("list",{ template:` <div> list </div> ` }) Vue.component("shopcar",{ template:` <div> shopcar </div> ` }) var vm = new Vue({ el:"#box", data:{ which:'home' } }) </script> </body> </html>