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 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
javascript数组去重方法分析
Dec 15 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
详解微信UnionID作用
May 15 Javascript
探索node之事件循环的实现
Oct 30 Javascript
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
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
在python shell中运行python文件的实现
2019/12/21 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
小学生成长感言
2014/01/30 职场文书
《手指教学》反思
2014/02/14 职场文书
建议书怎么写
2014/03/12 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python