<!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. python学习------迭代器协议和生成器

    一.递归和迭代 递归:自己调用自己 举例解释:问路   A问B康明网络科技怎么走,B说我不是很清楚,我帮你问问C,C说我也不知道.我问问D,D说 就在兴隆.之后D返回结果给C,C返回结果给B,B返回结 ...

  2. 后端程序员必会常用Linux命令总结

    1. 调整终端窗口大小: ctrl + '-'  缩小, ctrl + shift + '='  放大. 2. command --help 查询命令详细 或者 man command 3.ls命令, ...

  3. Altium designer 新建快捷键

    示例: 1.按下Ctrl: 2.点击需要建立快捷键的图标:点击交互式布线图标,然后在选择性输入要用到的快捷键:

  4. SQL-59 按照salary的累计和running_total，其中running_total为前两个员工的salary累计和，其他以此类推。

    题目描述 按照salary的累计和running_total,其中running_total为前两个员工的salary累计和,其他以此类推. 具体结果如下Demo展示..CREATE TABLE `s ...

  5. MinHook 分析01 （x86的jmp+offset类型hook）

    MinHook的原理就在于重写目标函数.在这次分析的X86模式中,32位相对JMP覆盖了整个地址空间.因为在相对地址计算中溢出的位被忽略,所以在X86模式中,函数的地址是容易掌控的. 直接来进入正题. ...

  6. 说一说js中的闭包

    不说官方给的定义,感觉自己刚开始看也不是很理解. 闭包 : 其实就是 该函数能使用函数外定义的变量. 为什么要使用闭包? 首先来说一下局部变量和全局变量的危害: 全局变量容易全局污染,局部变量又无法共 ...

  7. Android四大组件之Service --- 活动与服务的绑定

    Acticity与Service进行通信如何在活动中指挥service去做事情? 这里就借助onBind()方法了比如说,目前我们希望在MyService里提供一个下载功能,然后在活动中可以决定何时开 ...

  8. C# XML反序列化与序列化举例:XmlSerializer（转）

    using System; using System.IO; using System.Xml.Serialization; namespace XStream { /// <summary&g ...

  9. Flutter 卡在 package get 的解决办法

    今天在尝试使用Flutter 的时候,需要使用一个第三方库 修改了 pubspec 文件之后,AS 像往常一样提示 需要 package get. 之前都挺正常,不知道今天怎么了. 一直处在 Runn ...

  10. input(Text)控件作为填空输入,但运行后,有曾经输入的记录显示,用autocomplete="off"解决

    系统中,有设计填空题,原来程序中,用input(Text)控件,   <input type="text" name="NO<%=rs("id&qu ...