Vue.js手风琴菜单组件开发实例
更新时间:2017年05月16日 11:36:35 作者:codingNoob
这篇文章主要为大家详细介绍了Vue.js手风琴菜单组件开发实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下
小图标是引入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="http://9i0i.com/pic.php?p=../lib/vue.min.js"></script> <script type="text/javascript" src="http://9i0i.com/pic.php?p=../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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
Vue3-新特性defineOptions和defineModel示例详解
在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧2023-11-11vue3的ref,computed,reactive和toRefs你都了解吗
这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助2022-03-03
最新评论