本文为大家分享了vuejs组件开发之手风琴菜单组件实例，供大家参考，具体内容如下

小图标是引入字体-棒极了字体图标库绘制的。效果如下图所示：

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title index/title link rel='样式表href=' CSS/font-真棒。量滴CSS ' link rel='样式表href='css/index.css '脚本类型=' text/JavaScript ' src=' http 3360./lib/vue。量滴js '/script脚本类型=' text/JavaScript ' src=' http :/lib/jquery-1。11 .3 .量滴js /脚本样式* { margin 3360 0；padd : 0；}车身{衬垫-顶部： 100 px} # Tabpanel { width : 120 px heart : auto rgin : 0 auto } # Tabpanel .项目sildermun ul li { height: 40px线高： 40px列表样式：无；} #tabPanel .项目sildermun ul li:悬停{背景： # CCC} #tabPanel .项目menutitle { height: 40px线高： 40px文本对齐：中心；背景# ccc} #tabPanel .项目sildermun { text-align : center；背景技术# eee }/style/head dy div id=' Tabitem '滑块-项目/滑块-项目滑块-项目/滑块-项目滑块-项目/滑块-项目滑块-项目滑块-项目/滑块-项目/div！-组件模板，也可以使用模板标签方式引入模板-模板id=' tab ' div id=' tabbpanel ' div class=' item ' div class=' menu title ' @ click=' toggle()' I class=' icon-th-list '/I { { parentItem } }/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/模板！-组件模板，也可以使用模板标签方式引入模板-/body/html脚本var Vue=new Vue({ El : ' # tabItem }，data: { }，components : { ' slider-item ' : { template : ' # tab }，data : function(){ return { status 3360 false，parentItem: '父级菜单，childItems: ['子级菜单', '子级菜单', '子级菜单', '子级菜单] } }，methods: { //切换滑块toggle:函数(){ this.status=！这种地位；} } } } });/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。