<%@ 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. Locust 参数化

    概述: 和Loadrunner一样对于多用户并发时,重复登入或者数据的重复使用会造成脚本的失败,那么我们引入Loadrunner的参数化概念,对用户数据进行参数化来使脚本运行成功. 头绪:   use ...

  2. Android开发中Activity状态的保存与恢复

    当置于后台的Activity因内存紧张被系统自动回收的时候,再次启动它的话他会重新调用onCretae()从而丢失了之前置于后台前的状态. 这时候就要重写Activity的两个方法来保存和恢复状态,具 ...

  3. 如何在Linux系统下挂载光盘

    工具/原料 Linux 方法/步骤   找到光盘的完整路径名.在命令行输入:ls -l /dev | grep cdrom. 可以看到光盘的名字叫做:cdrom1.然后在命令行执行: mount /d ...

  4. select添加option

    本文介绍select添加option的两种方法 1.使用selectObject.add(option,before)方法,其中 option为要添加选项元素.必需是 option 或 optgrou ...

  5. windows下使用kafka的常用命令

    参考文档: https://blog.csdn.net/evankaka/article/details/52421314 http://orchome.com/6 1 启动zookeeper cmd ...

  6. paramiko模块(01-04节)、SSH

    1.  SSH(安全外壳协议) SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SS ...

  7. if 循环

    age_of_princal = 56guess_age = int(input(">>:")) if guess_age == age_of_princal: pri ...

  8. goaccess geoip 测试

      goaccess 是一个很不错的日志实时统计分析工具,我们可以用来方便的分析nginx apcahe iis 等的日志信息 对于geoip 的支持是需要源码编译的,所以基于官方docker 镜像添 ...

  9. 在xcode 上调试c程序

    打开xcode 选择 Create a new Xcode project 选择Command Line Tool 给你的项目起个名,选择c语言 点击next 选择存储位置,就会制动生成一个项目,在项 ...

  10. MySQL 烂笔头 备份和还原

    备份 mysqldump -u root -p testdb > d:/backupfile.sql 还原 mysql -u root -p testdb2 <d:/backupfile. ...