Vue.js手风琴菜单组件开发实例


Posted in Javascript onMay 16, 2017

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

小图标是引入font-awesome字体图标库绘制的。效果如下图所示:

Vue.js手风琴菜单组件开发实例

代码:

<!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>

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

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
浅谈es6中的元编程
Dec 01 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
bootstrap响应式表格实例详解
May 15 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php array的学习笔记
2012/05/10 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python函数返回值实例分析
2015/06/08 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
经销商订货会主持词
2014/03/27 职场文书
生日宴会策划方案
2014/06/03 职场文书
酒会邀请函
2015/01/31 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
导游词之丽江普济寺
2019/10/22 职场文书