• 插槽slot


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .panel{
                max-width: 300px;
                border:1px solid #999;
                margin-bottom: 15px;
            }
            .panel>*{
                padding: 15px;
            }
            .panel .title{
                border-bottom: 1px solid #999;
            }
            .panel .footer{
                border-top: 1px solid #999;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <panel><div slot="title">我是你大爷</div><div slot="content">xxxxxxxxxxxx</div></panel>
        <panel><div slot="content">yyyyyyyyyyyy</div></panel>
        <panel><div slot="content">zzzzzzzzzzzz</div><div slot="footer">我是你二大爷</div></panel>
    </div>
    <template id="panel-tpl">
        <div class="panel">
            <div class="title">
                <slot name="title">默认的头部信息</slot>
            </div>
            <div class="content">
                <slot name="content">默认的主体内容</slot>
            </div>
            <div class="footer">
                <slot name="footer">默认的尾部信息</slot>
            </div>
        </div>
    </template>
    
    <script src="../lib/vue.js"></script>
    <script src="js/main.js"></script>
    </body>
    </html>
    Vue.component("panel",{
        template:"#panel-tpl"
    });
    
    new Vue({
        el:"#app",
        data:{
    
        }
    })
  • 相关阅读:
    IOS手机 html5页面 数字变成蓝色链接的原因
    html5预加载图片的写法
    jquery取消绑定的方法
    CSS3幸运大转盘最简单的写法
    深度搜索应用之黑白图像(非递归)
    springday03-go1
    springday02-go4
    spring day02-go3
    springday02-go2
    spring da-y02-go1
  • 原文地址:https://www.cnblogs.com/52-qq/p/8387190.html
Copyright © 2020-2023  润新知