<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>ToDoList</title>

	<link rel="stylesheet" href="dist/css/bootstrap.min.css">

	<script src="vue.min.js"></script>

</head>

<body>

	<div id="box" class="container">

		<div class="row clearfix">

			<div class="col-md-12 column">

					<div class="form-group">

						 <label for="exampleInputEmail1">用户名</label><input type="text" class="

						 user form-control" id="exampleInputEmail1" />

					</div>

					<div class="form-group">

						 <label for="exampleInputPassword1">密码</label><input type="password" class="

						 psd form-control" id="exampleInputPassword1" />

					</div>

					<button  style="width:300px;margin: 10px auto" @click="submit()" >Submit</button>

			</div>

			<div class="col-md-12 column">

				<table class="table table-striped">

					<thead>

						<tr>

							<th class="col-md-2">

								编号

							</th>

							<th class="col-md-4">

								姓名

							</th>

							<th class="col-md-4">

								密码

							</th>

							<th class="col-md-2">

								<button type="button" class="btn btn-default btn-primary">按钮</button>

							</th>

						</tr>

					</thead>

					<tbody>

						<tr v-for="(m, index) in msg">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--官方文档声明：$index和$key被移除 -->

							<td>

								{{ index+1 }}

							</td>

							<td>

								{{ m[0] }}

							</td>

							<td>

								{{ m[1] }}

							</td>

							<td>

								 <button type="button" class="btn btn-default btn-primary" v-on:click="getIndex(index)">删除</button>

							</td>

						</tr>

					</tbody>

				</table>

			</div>

		</div>

	</div>

	<script>

		var vm=new Vue({

			el:"#box",

			data:{

				msg:[["user","123456"],["admin","123"]]

			},

			methods:{

				getIndex: function(index){

					vm.msg.splice(index,1);

				},

				submit:function(){

					var arr=[]

					var user=document.querySelector(".user").value;

					var psd=document.querySelector(".psd").value;

					arr.push(user);

					arr.push(psd);

					vm.msg.push(arr);

				}

			}

		});

	</script>

</body>

</html>

　　纯属自娱，看客见谅。。。

vue写的ToDoList的更多相关文章

  1. 通过Vue实现的todolist

    和接口对接的todolist因为有后台的存在,todolist获取的数据会一直存在不丢失(不管你如何刷新页面),思路如下: 首先得先搞到接口: 通过这个接口地址可以获取整段的数据,成功err为0. 于 ...

  2. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  3. vue写出放大镜的效果

    用vue写出放大镜查看图片的效果. 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { i ...

  4. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  5. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  6. 使用Vue写一个九九乘法表

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表, ...

  7. Vue案例之todoLIst实现

    使用Vue实现todolist案例,如有不对敬请大佬多多指教 功能: 1.增加功能:在新增版块里面的输入框内输入数据,点击后面的"添加"按钮,将输入的数据添加到列表中,默认是未完成 ...

  8. 用vue 写h5页面-摇一摇

    vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...

  9. 原创《开源一个用 vue 写的树层级组件 vue-ztree》

    最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.tree ...

随机推荐

  1. Be a Smart Raftsman SGU475

    传送门 题目大意 有m+1个点,0是起点,m是终点,i-1到i有一条边,有一个船由0驶往m,不能返回,它在载重小于等于ci时通过第i条边消耗的时间为di否则为Di,现在有n个人,每个人体重为wi,上船 ...

  2. Django models模型ORM

    一.ORM介绍 映射关系: 表名 -------------------->类名 字段-------------------->属性 表记录----------------->类实例 ...

  3. 36-OLED显示实验

    1.OLED原理 有四种工作模式 先把片选拉低,如果是写的话,把RD拉高,在WR的上升沿写数据到数据线上,DC决定是数据还是命令.读类似了. 2.程序显示原理 3.代码 4.自己写代码 http:// ...

  4. Java Annotation详解

    元数据的作用 如果要对于元数据的作用进行分类,目前还没有明确的定义,不过我们可以根据它所起的作用,大致可分为三类: l          编写文档:通过代码里标识的元数据生成文档. l         ...

  5. thrift使用小记

        Thrift是一个跨语言的服务部署框架,最初由Facebook于2007年开发,2008年进入Apache开源项目.Thrift通过一个中间语言(IDL, 接口定义语言)来定义RPC的接口和数 ...

  6. 2015年第六届蓝桥杯省赛试题（JavaA组）

    1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分9分)4.代码填空 (满分11分)5.代码填空 (满分13分)6.结果填空 (满分17分)7.结果填空 (满分21分)8.程序设 ...

  7. nodejs nodejs的操作

    nodejs的操作 由于版本造成的命令不能正常安装,请参考五问题 一.概念: 参考百度百科: http://baike.baidu.com/link?url=aUrGlI8Sf20M_YGk8mh-- ...

  8. uoj#448. 【集训队作业2018】人类的本质（Min_25筛+拉格朗日插值）

    题面 传送门 题解 肝了整整一天--膜拜yww和cx巨巨--(虽然它们的题解里我就没看懂几个字) 请备好草稿纸和笔,这种题目就是需要耐心推倒 题目所求是这么一个东西 \[ \begin{aligned ...

  9. Python第一次写的代码

    #!/bin/bash/env python # -*- coding:utf-8 -*- #function:输出1-10每隔1秒 import time start = 1 flag = True ...

  10. 验证码(captcha)的由来

    如果您允许用户在您的网站上发表内容,如留下评论和创建用户配置文件,那么您可能会看到,垃圾留言散播者试图利用这些渠道来给他们自己的网站创造流量.在您的网站上出现这类垃圾留言,对任何人来说都不愉快.用户可 ...