vuejs组件开发之手风琴菜单组件实例

来源：互联网发布：淘宝内部券是真的吗编辑：程序博客网时间：2024/06/07 06:13
小图标是引入font-awesome字体图标库绘制的。效果如下图所示：
这里写图片描述
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <link rel="stylesheet" href="css/font-awesome.min.css">    <link rel="stylesheet" href="css/index.css">    <script type="text/javascript" src="../lib/vue.min.js"></script>    <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>    <style>        * {            margin: 0;            padding: 0;        }        body {            padding-top: 100px;        }        #tabPanel {            width: 120px;            height: auto;            margin: 0 auto;        }        #tabPanel .item .sildermun ul li {            height: 40px;            line-height: 40px;            list-style: none;        }        #tabPanel .item .sildermun ul li:hover {            background: #ccc;        }        #tabPanel .item .menutitle {            height: 40px;            line-height: 40px;            text-align: center;            background: #ccc;        }        #tabPanel .item .sildermun {            text-align: center;            background: #eee;        }    </style></head><body>    <div id="tabItem">        <slider-item></slider-item>        <slider-item></slider-item>        <slider-item></slider-item>        <slider-item></slider-item>    </div>    <!--组件模板,也可以使用template标签方式引入模板-->    <template id="tab">        <div id="tabPanel">            <div class="item">                <div class="menutitle" @click="toggle()"><i class="icon-th-list"></i>&nbsp;{{parentItem}}</div>                    <div class="sildermun" v-show="status">                        <ul>                            <li v-for="(index,v) in childItems"><i class="icon-star"></i>&nbsp;{{v+index}}</li>                        </ul>                    </div>                </div>            </div>        </div>    </template>    <!--组件模板,也可以使用template标签方式引入模板--></body></html><script>    var vue = new Vue({        el: "#tabItem",        data: {        },        components: {            'slider-item': {                template: '#tab',                data: function() {                    return {                        status: false,                        parentItem: "父级菜单",                        childItems: ["子级菜单", "子级菜单", "子级菜单", "子级菜单"]                    }                },                methods: {                    //切换滑块                    toggle: function() {                        this.status = !this.status;                    }                }            }        }    });</script>
阅读全文
0 0