动态组件

2022-03-27 18:00:35 作者：互联网
<!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{
      width: 100%;
      height: 100%;
    }
   footer ul {
    display: flex;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 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>
标签：40px,0px,height,Vue,template,组件,home,动态
来源： https://www.cnblogs.com/yyy1234/p/16063711.html