您好,登錄后才能下訂單哦!
本文為大家分享了vuejs組件開發(fā)之手風(fēng)琴菜單組件實(shí)例,供大家參考,具體內(nèi)容如下
小圖標(biāo)是引入font-awesome字體圖標(biāo)庫繪制的。效果如下圖所示:
代碼:
<!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標(biāo)簽方式引入模板--> <template id="tab"> <div id="tabPanel"> <div class="item"> <div class="menutitle" @click="toggle()"><i class="icon-th-list"></i> {{parentItem}}</div> <div class="sildermun" v-show="status"> <ul> <li v-for="(index,v) in childItems"><i class="icon-star"></i> {{v+index}}</li> </ul> </div> </div> </div> </div> </template> <!--組件模板,也可以使用template標(biāo)簽方式引入模板--> </body> </html>
<script> var vue = new Vue({ el: "#tabItem", data: { }, components: { 'slider-item': { template: '#tab', data: function() { return { status: false, parentItem: "父級(jí)菜單", childItems: ["子級(jí)菜單", "子級(jí)菜單", "子級(jí)菜單", "子級(jí)菜單"] } }, methods: { //切換滑塊 toggle: function() { this.status = !this.status; } } } } }); </script>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。