Vue.js手风琴菜单组件开发实例
更新时间:2017年05月16日 11:36:35 作者:codingNoob
这篇文章主要为大家详细介绍了Vue.js手风琴菜单组件开发实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下
小图标是引入font-awesome字体图标库绘制的。效果如下图所示:
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!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 > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <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 3 的 createApp方法初始化应用的基本步骤
createApp 是 Vue 3 引入的全局 API,用于创建一个应用实例,这篇文章主要介绍了如何使用 Vue 3 的 createApp方法初始化应用,通过 createApp 方法,我们从 Vue 3 的基本初始化开始,扩展到插件的应用、多个应用实例的创建等,需要的朋友可以参考下2024-05-05
最新评论