<%@ 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. ip本地查询

    下载地址:http://www.cz88.net/ http://www.crsky.com/soft/2611.html QQWry.dat文件在结构上分为3块:文件头,记录区,索引区. 一般我们要 ...

  2. 剑指Offer 55. 链表中环的入口结点 （链表）

    题目描述 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 题目地址 https://www.nowcoder.com/practice/253d2c59ec3e4bc68d ...

  3. 1.6 selenium3+firefox环境搭建

    1.6 selenium3+firefox环境搭建 有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的.(备注:这里 ...

  4. AFN 二次封装

    #import "YQDataManager.h" #import <YYModel/YYModel.h> #pragma mark - 数据model基类 @impl ...

  5. 百战程序员9- IO流

    1.IO是什么意思? data source是什么意思? IO:输入输出 data source:数据源 2.字节流和字符流有什么区别?输入流和输出流有什么区别? 分类 3.节点流和处理流有什么区别? ...

  6. ArrayUtil的创建和使用

    求数组最小值求数组最大值遍历数组元素求数组总和求数组平均数求数组反转实现数组的复制对数组进行排序 写入的方法和包: public class ArrayUtil { //求数组的最大值 public ...

  7. php 会话控制（关于session的维护与生命周期）

    Session是由应用服务器维持的一个服务器端的存储空间,用户在连接服务器时,会由服务器创建生成一个唯一的sessionID,用该sessionID为标识符来存取服务器端的Session存储空间,在会 ...

  8. .NET代码执行效率优化

    NET性能优化方面的总结 从2004年底开始接触C#到现在也有2年多的时间了,因为有C++方面的基础,对于C#,我习惯于与C++对比.现在总结一些.NET方面的性能优化方面的经验,算是对这两年多的.N ...

  9. Spring+SpringMVC+Mybatis+Maven+CXF+WebService整合之服务端

    WebService服务端项目结构: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  10. 黄聪：C#使用Application.Restart重启程序出错解决办法

    调用 Application.Restart重启程序出错 解决办法,就是给程序的.exe文件,加上下面的设置