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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JS中的const命令你真懂它吗
Mar 08 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开发中常用的8个小技巧
2008/08/27 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
js重写方法的简单实现
2016/07/10 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
ant design实现圈选功能
2019/12/17 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
flask中的wtforms使用方法
2018/07/21 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
如何基于Python批量下载音乐
2019/11/11 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
几款好用的python工具库(小结)
2020/10/20 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
学校十一活动方案
2014/02/01 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
银行求职信怎么写
2014/05/26 职场文书