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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
php数组去重的函数代码
2013/02/03 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
简单的三步vuex入门
2018/05/20 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
浅谈flask中的before_request与after_request
2018/01/20 Python
python 编码规范整理
2018/05/05 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python的pygame安装教程详解
2020/02/10 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
森林防火工作方案
2014/02/14 职场文书
体育口号大全
2014/06/18 职场文书
应届大学生求职信
2014/07/20 职场文书
给老师的感谢信
2015/01/20 职场文书