Vue.js tab实现选项卡切换


Posted in Javascript onMay 16, 2017

本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>index</title>
 <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;
 }

 #tabPanel .itemname {
 height: 40px;
 width: 180px;
 margin-bottom: 10px;
 }

 #tabPanel .itemcontent {
 height: 40px;
 width: 180px;
 }

 #tabPanel .addbtn {
 margin: 10px 0 0 95px;
 width: 185px;
 height: 40px;
 }

 #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>
</head>

<body>

 <div id="tabItem">
 <my-tab></my-tab>
 <my-tab></my-tab>
 </div>

 <!--组件模板-->
 <script type="text/template" id="tab">
 <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>
 </script>
 <!--组件模板-->
</body>

</html>
<script>
 var vue = new Vue({
 el: "#tabItem",
 data: {

 },
 components: {
 'my-tab': {
 template: '#tab',
 data: function() {
  return {
  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>

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

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

Javascript 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
js实现二级联动简单实例
Jan 11 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
Vue.js手风琴菜单组件开发实例
May 16 #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
You might like
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php备份数据库类分享
2015/04/14 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
使用Apache的rewrite
2021/03/09 Servers
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python快速排序算法实例分析
2017/11/29 Python
python 编码规范整理
2018/05/05 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python如何绘制日历图和热力图
2020/08/07 Python
python wsgiref源码解析
2021/02/06 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang