<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>分页</title>

<style>

  *{margin: ;padding: ;}

  #page-break{margin-top: 20px;margin-left: 20px;}

  #page-break li{list-style: none;}

  #page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}

  #page-break a:hover{background-color: #eee;}

  #page-break a .banclick{cursor: not-allowed;}

  #page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}

  #page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}

  #page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}

  #page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}

  #page-break .jumpbox .jumpbtn:active {color: #337ab7;}

</style>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

      <div id="app-4" class="col-xs-12 main-table-wrapper">

        <table class="table table-striped table-hover table-bordered" id="main-table">

            <thead>

                <tr >

                    <th>姓名</th><th>日期</th><th>地址</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="item in tableData">

                    <td>{{ item.name }}</td>

                    <td>{{ item.address }}</td>

                    <td>{{ item.date }}</td>

                </tr>

            </tbody>

        </table>

    </div>

    <script>

      var app=  new Vue({

            el: '#app-4',

            data:{

                tableData: [{

                    date: '2016-05-02',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1518 弄',

                }, {

                    date: '2016-05-04',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1517 弄'

                }, {

                    date: '2016-05-01',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1519 弄'

                }, {

                    date: '2016-05-03',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1516 弄'

                }]

            }

        });

      </script>

</body>

</html>

vue day4 table的更多相关文章

  1. 关于【vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  2. vue day8 table page

    @{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html> <html> <he ...

  3. vue day7 table checkbox 全选

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. vue+ element table如何给指定的单元格添加点击事件？

    今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/ ...

  5. vue导出table内容至excel——转

    一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <template> <div c ...

  6. vue的table组件

    一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...

  7. vue的table切换

    HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...

  8. Vue(day4)

    这里说的Vue中的路由是指前端路由,与后端路由有所区别.我们可以使用url来获取服务器的资源,而这种url与资源的映射关系就是我们所说的路由.对于单页面程序来说,我们使用url时常常通过hash的方法 ...

  9. vue原生table合并单元格并可编辑

    <template> <div> <div class="el-card box-card table_container"> <div ...

随机推荐

  1. 洛谷P2886 [USACO07NOV]牛继电器Cow Relays

    题意很简单,给一张图,把基本的求起点到终点最短路改成求经过k条边的最短路. 求最短路常用的算法是dijkstra,SPFA,还有floyd. 考虑floyd的过程: c[i][j]=min(c[i][ ...

  2. vue双向数据绑定

    本文来源于 https://jingyan.baidu.com/article/91f5db1b0c2a4f1c7f05e3a8.html

  3. tomcat中配置ssl的http协议

    问题: IDEA配置tomcat后运行时报如下错误: Error running wis-client-web: SSL HTTP Connector node not found: set up o ...

  4. ecplise导入项目报错而文件不报错

    第一步 确认项目的jdk和tomcat版本,在Java Build Path的Libraries中查看包是否有报错,按照本机环境进行配置 第二步 检查 Java Compiler中的jdk版本,和ec ...

  5. Java容器解析系列(9) PrioriyQueue详解

    PriorityQueue:优先级队列; 在介绍该类之前,我们需要先了解一种数据结构--堆,在有些书上也直接称之为优先队列: 堆(Heap)是是具有下列性质的完全二叉树:每个结点的值都 >= 其 ...

  6. Java抽象类总结规定

    1. 抽象类不能被实例化(初学者很容易犯的错),如果被实例化,就会报错,编译无法通过.只有抽象类的非抽象子类可以创建对象. 2. 抽象类中不一定包含抽象方法,但是有抽象方法的类必定是抽象类. 3. 抽 ...

  7. 页面制作学习笔记：D2.Photoshop切图基础知识

    一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 < ...

  8. nim读写注册表的小例子

    nim读写注册表的小例子 2018年5月7日 15:11:58 codegay 贴一个nim读写注册表的例子,虽然简单,但是nim官方没有写windows注册表相关的文档, 我贴的例子兴许能帮大家省点 ...

  9. 第四次Scrum编码冲刺

    第四次Scrum编码冲刺!!!! 一.总体任务: 本次冲刺是完成对图书馆管理系统的最后三个功能的实现------管理员对用户授权.用户注销和用户查询 二.个人任务及完成情况:    本人本次的任务是实 ...

  10. 三,用户交互方式与python基本数据类型

    一.与用户交互 input python2中:用户输入什么类型的数据,就储存为什么类型的数据.比如输入数字则储存为整型,输入符号则存储为字符串型.raw_input会将所有输入的类型转换为字符串型. ...