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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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/03/27 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python人人网登录应用实例
2014/09/26 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python tkinter基本属性详解
2019/09/16 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
高中校园广播稿
2014/01/11 职场文书
小学英语课后反思
2014/04/26 职场文书
事业单位鉴定材料
2014/05/25 职场文书
教师岗位职责
2015/02/03 职场文书
优质护理服务心得体会
2016/01/22 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android