基于Vue.js实现tab滑块效果


Posted in Javascript onJuly 23, 2017

本文实例为大家分享了Vue.js实现tab滑块效果的具体代码,供大家参考,具体内容如下

基于Vue.js实现tab滑块效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="../lib/vue.min.js"></script>
 <style>
  *{margin:0;padding:0;}
  #tabPanel .itemname{height:40px;width:180px;margin-bottom:10px;}
  #tabPanel .itemcontent{height:40px;width:180px;}
  #tabPanel .addbtn{width:100px;height:30px;}
  #tabPanel .active{background:#eee;}
  #tabPanel{height:340px;width:500px;margin:100px auto;}
  #tabPanel .tab{height:40px;background:#ccc;margin-top:10px;}
  #tabPanel .tab ul li{list-style: none;float:left;width:80px;height:40px;text-align:center;line-height:40px;}
  #tabPanel .content{height:300px;width:500px;background:#eee;}
 </style>
 <title>Vue.js编写tab滑块效果</title>
</head>
<body>
 <div id="tabPanel">
  <label>添加滑块名称:<input type="text" v-model="tabItem" class="itemname"></label><br>
  <label>添加滑块内容:<input type="text" v-model="tabContent" class="itemcontent"></label><br>
  <input type="button" value="添加选项" @click="addItem()" class="addbtn">
  <div class="tab">
   <ul>
    <li v-for="(value, index) in tabs" v-bind:class="{active: index == num }" @mouseover="toggle(index)" @dblclick="del(index)">{{value}}</li>
   </ul>
  </div>
  <div class="content">
   <div class="box" v-for="(value, index) in tabContents" v-show="index == num" contenteditable="true" @blur="editContent(index,value)">{{value+index}}</div>
  </div>
 </div>
</body>
<script>
 var v = new Vue ({
  el: "#tabPanel",
  data: {
   tabs: ["第一项","第二项"],
   tabContents: ["第一项内容","第二项内容"],
   num: 0,
   tabItem:"",
   tabContent:""
  },
  methods:{
   //切换滑块
   toggle: function(index){
    this.num = index;
   },
   //添加滑块
   addItem: function(){
    if(this.tabItem == "" || this.tabContent == ""){
     alert("填写完整的名称和内容");
    }else{
     this.tabs.push(this.tabItem);
     this.tabContents.push(this.tabContent);
    }
   },
   //双击删除滑块
   del: function(index){
    this.tabs.splice(index,1);
    this.tabContents.splice(index,1)
   },
   //编辑选项内容
   editContent: function(index,value){
    this.tabContents[index] = value;
    console.log(this.tabContents);
   }
  }
 });
</script>
</html>

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

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 #Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 #Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 #Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 #Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
vue axios用法教程详解
Jul 23 #Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Js实现无刷新删除内容
2015/04/29 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
js仿360开机效果
2019/12/26 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
使用Python生成XML的方法实例
2017/03/21 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Django model select的多种用法详解
2019/07/16 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python函数调用追踪实现代码
2020/11/27 Python
代理班主任的自我评价
2014/02/04 职场文书
市场营销工作计划书
2014/05/06 职场文书
化学教育专业自荐信
2014/07/04 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
世界文化遗产导游词
2015/02/13 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书