<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

</head>

<body>

    <div id="app">

            <table border="1px" width="600px">

                    <tr>

                        <td>姓名</td>

                        <td>年龄</td>

                        <td>性别</td>

                    </tr>

                    <tr v-for="person in people">

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

                        <td>{{ person.age  }}</td>

                        <td>{{ person.sex  }}</td>

                    </tr>

            </table>

       </div>

</body>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/vue.min.js"></script>

<script type="text/javascript">

var vm = new Vue({

    el: '#app',

    data: {

        people: [{

            name: 'Zhangsan',

            age: ,

            sex: '男'

        },

        {

            name: 'Lucy',

            age: ,

            sex: '女'

        },

        {

            name: 'Tom',

            age: ,

            sex: '男'

        },

        {

            name: 'Jesen',

            age: ,

            sex: '男'

        }]

    }

});

</script>

</html>

vue.js建立一个简单的表格的更多相关文章

  1. 学习用node.js建立一个简单的web服务器

    一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解 ...

  2. 使用Vue.js制作仿Metronic高级表格（一）静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  3. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  4. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  5. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  6. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  7. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  9. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

随机推荐

  1. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  2. 【oracle入门】数据完整性约束

    数据的完整性约束是对数据描述的某种约束条件,关系型数据模型中可以有三类完整性约束:实体完整性.参照完整性和用户定义的完整性. 实体完整性Entity Integrity 一个基本关系通过对应显示世界的 ...

  3. JavaBasic_12

    类 抽象:对象的共性 类:产生对象的模板(对于属性来讲,类规定有没有属性以及属性类型,具体的属性值因对象的不同而不同) 数据类型:数据集及基于这个数据集的操作 类:我们自定义类型(定义成员变量,基于数 ...

  4. Unity Mathf/Math数学运算函数说明全集(Chinar总结)

    Unity Mathf 数学函数库 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  5. Lucene的基本使用

    1.了解搜索技术 2.搜索引擎的原理 索引:类似于书的目录 3.实现搜索技术的方式 方式1:数据库搜索 利用SQL语句进行模糊搜索: select * from items where title l ...

  6. Github访问速度慢和下载慢的解决方法

    原因 为什么访问速度慢.下载慢?github的CDN被某墙屏了,由于网络代理商的原因,所以访问下载很慢.Ping github.com 时,速度只有300多ms. 解决方法 绕过dns解析,在本地直接 ...

  7. android selector shape 使用

    先上效果图 message_toolbar_left_bg_selector <?xml version="1.0" encoding="utf-8"?& ...

  8. android查看屏幕密度，分辨率的shell命令

    adb shell dumpsys window displays

  9. VIVADO 入门之仿真与逻辑分析仪使用

    多路分频器设计 在第七节的学习中,笔者带大家通过一个入门必学的流水灯实验实现,快速掌握了VIVADO基于FPGA开发板的基本流程.考虑到很多初学者并没有掌握好Vivado 下FPGA的开发流程,本章开 ...

  10. 手机App调试(Android)

    方法一:  用Chrome+手机来调试.1) 在PC上安装谷歌的USB驱动:         http://developer.android.com/sdk/win-usb.html#top     ...