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 ...
随机推荐
- Eclipse安装Activiti Designer插件
本人使用的是在线安装: 打开Eclipse -> Help -> Install New SoftWare-> Add 然后按照如下对话框输入: Name:Activiti BPMN ...
- Windows系统,Tensorflow的Tensorboard工具细节问题
随着跟着TensorFlow视频学习,学到Tensorboard可视化工具这里的时候. 在windows,cmd里面运行,tensorboard --logdir=你logs文件夹地址 这行代码,一 ...
- Python全栈之路----常用模块----sys模块
sys.argv 命令行参数 List,第一个元素是程序本身路径 #test.py import sys print(sys.argv) D:\ProgramLearning\Py_program& ...
- Linux下设置redis的密码和远程访问
编辑vi /etc/redis/redis.conf ,有的是vi /etc/redis.conf ,在68行修改:bind 127.0.0.1 ::1 为 bind 0.0.0.0 ::1,这样就可 ...
- js··事件捕捉
给一个元素绑定事件,普通写法是 obj.onclick=function(){} 这就相当于给obj的onclick属性赋值是一个道理. obj.onclick=function(){} 这种写法有一 ...
- python:递归函数（汉诺塔）
#hanoi.py def hanoi(n,x,y,z): if n==1: print(x,"-->",z) else: hanoi(n-1,x,z,y) print(x, ...
- MySQL5.7.32 通用版本安装
1 上传镜像,配置好yum源 2 下载MySQL相关的包 https://dev.mysql.com/downloads/mysql/ 3 解压安装: tar -zxvf mysql-5.7.23- ...
- Burpsuite 1.7.33启动的一点小问题。
最近用的burp到期了,就想找个新版本的. https://www.52pojie.cn/thread-691448-1-1.html 上面帖子里贴了最新的几个版本的burp,下载以后,问题出现了,无 ...
- c#获取汉字首字母拼音
/* * 由SharpDevelop创建. * 用户: lenovo * 日期: 2013/10/22 * 时间: 20:15 * * 要改变这种模板请点击 工具|选项|代码编写|编辑标准头文件 */ ...
- python_字符编码&格式化
电脑最小储存单位是bit(位),8bit为一个Byte(字节), 8bit=1Byte 1024Byte=1KB 1024KB=1MB 1024MB=1GB 1024GB=1TB 编码的故事: 计算机 ...