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>&nbsp;{{parentItem}}</div>
  <div class="sildermun" v-show="status">
  <ul>
  <li v-for="(index,v) in childItems"><i class="icon-star"></i>&nbsp;{{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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • vue之邮箱、密码、手机号码等输入验证规则说明

    vue之邮箱、密码、手机号码等输入验证规则说明

    这篇文章主要介绍了vue之邮箱、密码、手机号码等输入验证规则说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue中的全局指令防止按钮重复点击

    Vue中的全局指令防止按钮重复点击

    这篇文章主要介绍了Vue中的全局指令防止按钮重复点击,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 路由视图 router-view嵌套跳转的实现

    vue 路由视图 router-view嵌套跳转的实现

    这篇文章主要介绍了vue 路由视图 router-view嵌套跳转,主要实现的内容有制作一个登录页面,跳转到首页,首页包含菜单栏、顶部导航栏、主体,标准的后台网页格式,菜单点击显示不同的页面,感兴趣的小伙伴请参考下面文章内容
    2021-09-09
  • 使用 Vue 3 的 createApp方法初始化应用的基本步骤

    使用 Vue 3 的 createApp方法初始化应用的基本步骤

    createApp 是 Vue 3 引入的全局 API,用于创建一个应用实例,这篇文章主要介绍了如何使用 Vue 3 的 createApp方法初始化应用,通过 createApp 方法,我们从 Vue 3 的基本初始化开始,扩展到插件的应用、多个应用实例的创建等,需要的朋友可以参考下
    2024-05-05
  • vue-cli扩展多模块打包的示例代码

    vue-cli扩展多模块打包的示例代码

    本篇文章主要介绍了vue-cli扩展多模块打包的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue2中vue.config.js简单配置代理跨域的方法

    vue2中vue.config.js简单配置代理跨域的方法

    在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 使用typescript构建Vue应用的实现

    使用typescript构建Vue应用的实现

    这篇文章主要介绍了使用typescript构建Vue应用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • VUE接入腾讯验证码功能(滑块验证)备忘

    VUE接入腾讯验证码功能(滑块验证)备忘

    这篇文章主要介绍了VUE接入腾讯验证码功能(滑块验证)备忘,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue中强制组件重新渲染的正确方法

    Vue中强制组件重新渲染的正确方法

    这篇文章主要介绍了Vue中强制组件重新渲染的正确方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • element-ui表格列金额显示两位小数的方法

    element-ui表格列金额显示两位小数的方法

    这篇文章主要介绍了element-ui表格列金额显示两位小数的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论