动态组件

2022-03-27 18:00:35 阅读：153 来源： 互联网

标签：40px 0px height Vue template 组件 home 动态

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动态组件