<%@ 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. element ui表格相同内容自动合并

    一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...

  2. Day 2: ASP.NET and python trying

    ASP.NET and Python/Javascript Many jQuery plugins that are designed and shared for free on the inter ...

  3. java基础（5）内部类

    1 成员内部类的定义和使用 public class Outer { private String name; public class Inner { public void innerMethod ...

  4. xgboost中XGBClassifier(）参数详解

    http://www.cnblogs.com/wanglei5205/p/8579244.html 常规参数 booster gbtree 树模型做为基分类器(默认) gbliner 线性模型做为基分 ...

  5. Arch Linux pacman 与其他发行版操作比较

    原文:https://wiki.archlinux.org/index.php/Pacman/Rosettahttps://old-en.opensuse.org/Software_Managemen ...

  6. mingw using pthread

    转载http://www.cnblogs.com/tfanalysis/p/5505163.html ftp://sourceware.org/pub/pthreads-win32/ 有的时候需要使用 ...

  7. 活学活用wxPython基础框架

    看活活用wxpython这本书,基本框架是这样子的,这里有定义输出,然后打印出整个流程,可以看到是怎样执行的,明天请假了,五一回去玩几天,哈哈,估计假期过来都忘了 import wx import s ...

  8. chrome's developer console

    原文链接: https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a7 ...

  9. react学习笔记1一基础知识

    1.React 是一个用于构建用户界面的 JAVASCRIPT 库2.React 特点: a.声明式的设计 b.采用虚拟dom,最大限度的减少dom操作 C.组件化,可以复用 D.单向响应的数据流,减 ...

  10. 使用NPOI按照word模板文件生成新的word文件

    /// <summary> /// 按照word模板文件 生成新word文件 /// </summary> /// <param name="tempFile& ...