vuejs组件开发之手风琴菜单组件实例
2017-05-16 00:04
543 查看
小图标是引入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> {{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标签方式引入模板--> </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>
相关文章推荐
- Vue.js手风琴菜单组件开发实例
- Vue.js组件使用开发实例教程
- Vue.js 递归组件实现树形菜单(实例分享)
- vue.js开发实现全局调用的MessageBox组件实例代码
- Vue.js 父子组件通讯开发实例
- Vue.js 父子组件通讯开发实例
- vue.js表格组件开发的实例详解
- js中组件的开发实例
- Vue.js中兄弟组件之间互相传值实例
- Vue.js中组件中的slot实例详解
- vue.js指令和组件详细介绍及实例
- vue.js 左侧二级菜单显示与隐藏切换的实例代码
- Vuejs第八篇之Vuejs组件的定义实例解析
- vue.js原生组件化开发(一)——组件开发基础
- vue.js 组件开发经验
- vue.js 左侧二级菜单显示隐藏切换 实例
- vue多级多选菜单组件开发
- require.js+vue+vue-router+vue-resource开发微信上传图片组件
- require.js 加载 vue组件 r.js 合并压缩的实例
- vue.js实现仿原生ios时间选择组件实例代码