vue.js建立一个简单的表格
<%@ 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建立一个简单的表格的更多相关文章
- 学习用node.js建立一个简单的web服务器
一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解 ...
- 使用Vue.js制作仿Metronic高级表格(一)静态设计
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
随机推荐
- Jacobi-Anger expansion
[转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/16 适合于自己的关于Jacobi-Anger expansion的推导方法,这里记下来,方便以后查阅. ...
- css自定义checkbox和radio样式
很常见的问题,也有许多人写过类似的文章,自己写来记录下 css代码如下: #myCheck + label,.myRadio + label{ width:16px; height:16px; bor ...
- 洛谷P1019:单词接龙(DFS)
题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙" ...
- Scala环境(集成idea)
1 语言介绍 他已经出生15年了,就像明星一样,谁都不可能一开始就人气爆棚粉丝无数,得慢慢混. 据说这家伙已经威胁到了Java的地位,我当时也是被这句话惊到,才毅然决然的认识了他.目前也正在努力学习中 ...
- docker之 网络模式和跨主机通信
Docker的四种网络模式Bridge模式 当Docker进程启动时,会在主机上创建一个名为docker0... Docker的四种网络模式 Bridge模式 当Docker进程启动时,会在主机上创建 ...
- debian删除i386的包
sudo apt-get remove --purge `dpkg --get-selections | grep i386 | awk '{print $1}'`; sudo dpkg --remo ...
- access十万级数据分页
最近的一个项目采用winform+access,但后来发现客户那边的数据量比较大,有数十万条数据.用sql语句进行分页,每次翻页加载都需要8秒钟左右,实在难以忍受. 后来百度了一下,发现一篇文章我的A ...
- Windows启动配置数据(BCD)存储文件包含一些无效信息
Windows启动配置数据(BCD)存储文件包含一些无效信息-照牛排 http://www.zhaoniupai.com/archives/223.html 1)近来封装Windows 7,遇到挫折. ...
- Linux-Shell基础(变量,字符串,数组)
一. 什么是shell shell是一个用C语言编写的程序,它是用户使用Linux的桥梁,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统 ...
- python学习笔记之三-计算运行时间
方法1 import datetime starttime = datetime.datetime.now() #long running endtime = datetime.datetime.no ...