基于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 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
详细分析React 表单与事件
Jul 08 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
十天学会php之第一天
2006/10/09 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
简单JS代码压缩器
2006/10/12 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Numpy掩码式数组详解
2018/04/17 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python多线程实现TCP服务端
2019/09/03 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
HashMap和Hashtable的区别
2013/05/18 面试题
2014年团支书工作总结
2014/11/14 职场文书
保卫工作个人总结
2015/03/03 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python