bootstrap vue.js实现tab效果


Posted in Javascript onFebruary 07, 2017

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

项目目录结构

bootstrap vue.js实现tab效果

Student.js代码

function Student(){
  this.baseInfo = {
    tabStatus : true ,
    name : '张三',
    sex : 'male'
  } ,
  this.parentsInfo = {
    tabStatus : false,
    fatherName : '张全蛋',
    motherName : '李铁柱'
  } ,
  this.studySituation = {
    tabStatus : false,
    classSort : 1,
    gradeSort : 2
  }
}

CommonUtil.js代码

Array.prototype.del = function(filter){
 var idx = filter;
 if(typeof filter == 'function'){
  for(var i=0;i<this.length;i++){
   if(filter(this[i],i)) idx = i;
  }
 }
 this.splice(idx,1)
}

var ary=[{id:1,name:"b"},{id:2,name:"b"}];
var delid = 2;
ary.del(function(obj){
 return obj.id == delid;
})

html页

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Student Management</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" >
  <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
<body>
  <div id="stu" class="container">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >基本信息</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家长信息</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >成绩查询</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active">
        <table class="table">
          <tr>
            <td class="col-lg-2">姓名</td>
            <td class="col-lg-4">{{baseInfo.name}}</td>
            <td class="col-lg-2">性别</td>
            <td class="col-lg-4">{{baseInfo.sex}}</td>
          </tr>
        </table>
      </div>
      <div class="tab-pane fade in">
        <table class="table">
          <tr>
            <td class="col-lg-2">父亲名</td>
            <td class="col-lg-4">{{parentsInfo.fatherName}}</td>
            <td class="col-lg-2">母亲名</td>
            <td class="col-lg-4">{{parentsInfo.motherName}}</td>
          </tr>
        </table>
      </div>
      <div class="tab-pane fade in">
        <table class="table">
          <tr>
            <td class="col-lg-2">全班排名</td>
            <td class="col-lg-4">{{studySituation.classSort}}</td>
            <td class="col-lg-2">全级排名</td>
            <td class="col-lg-4">{{studySituation.gradeSort}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>
<script src="js/Student.js"></script>
<script>
  var student = new Student();
  new Vue({
    el : '#stu',
    data : {
      baseInfo : student.baseInfo,
      parentsInfo : student.parentsInfo,
      studySituation : student.studySituation
    } ,
    method : {

    }
  })
</script>
</html>

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

Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
javascript数组的使用
Mar 28 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
webpack多页面开发实践
Dec 18 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Node连接mysql数据库方法介绍
Feb 07 #Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 #Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 #Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 #Javascript
深入理解JavaScript中的for循环
Feb 07 #Javascript
You might like
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP7 弃用功能
2021/03/09 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
Python的面向对象思想分析
2015/01/14 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
追悼会子女答谢词
2014/01/28 职场文书
大雁塔导游词
2015/02/04 职场文书
怎样写家长意见
2015/06/04 职场文书
爱国主义主题班会
2015/08/14 职场文书
党员干部学习心得体会
2016/01/23 职场文书