vue 简易toDoList
vue+bootstrap简易响应式任务管理表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"/>
<script src="bs/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bs/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:".container",
data:{
datalist:[],
username:'',
age:'',
nowindex:-1
},
methods:{
add:function(){
if(this.username.trim()!=''&& this.age.trim()!=''){
this.datalist.push({
name:this.username,
age:this.age
});
} this.username='',
this.age=''
}, res:function(){
this.username='',
this.age=''
}, del:function(num){
if(num==-2){
this.datalist = [];
}else{
this.datalist.splice(num,1);
}
}
} })
}
</script>
</head>
<body>
<div class="container">
<form>
<form class="form-group">
<label for="username">任务</label>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入事件" v-model="username"/>
</form>
<br />
<form class="form-group">
<label for="age">时间</label>
<input type="text" name="age" id="age" class="form-control" placeholder="请输入时间" v-model="age"/>
</form>
<div class="form-group">
<input @click="add()" type="button" class="btn btn-primary" value="添加"/>
<input @click="res()" type="reset" class="btn btn-danger" value="重置" />
</div>
</form>
<table class="table table-bordered table-hover">
<caption class="h3 text-info">to do list</caption>
<tr class="text-center">
<th>序号</th>
<th>任务</th>
<th>时间</th>
<th>选项</th>
</tr>
<tr class="text-center" v-for="value in datalist">
<td>{{$index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>
<input data-toggle="modal" data-target="#sure" type="button" class="btn btn-primary btn-sm" value="删除" @click="nowindex=$index"/>
</td>
</tr>
<tr v-show="datalist.length!=0">
<td class="text-right" colspan="4">
<input data-toggle="modal" data-target="#yes" type="button" class="btn btn-primary btn-sm" value="删除全部" @click="nowindex=-2"/>
</td>
</tr> <tr v-show="datalist.length==0">
<td colspan="4" class="text-center">
<p>暂无任务</p>
</td>
</tr>
</table>
<!--模态框-->
<div class="modal fade" id="sure">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3>你确定要删除吗</h3>
</div>
<div class="modal-body text-right">
<input type="button" data-dismiss="modal" class="btn btn-info btn-sm" value="取消"/>
<input type="button" data-dismiss="modal" class="btn btn-primary btn-sm" value="确定" @click="del(nowindex)"/>
</div>
</div>
</div>
</div> <div class="modal fade" id="yes">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3>确定清空吗</h3>
</div>
<div class="modal-body text-right">
<input type="button" data-dismiss="modal" class="btn btn-info btn-sm" value="取消"/>
<input type="button" data-dismiss="modal" class="btn btn-primary btn-sm" value="确定" @click="del(nowindex)"/>
</div>
</div>
</div>
</div> </div>
</body> </html>
vue 简易toDoList的更多相关文章
- vue demo todo-list
html <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'> <ul> &l ...
- vue 实现todolist，包含添加，删除，统计，清空，隐藏功能
vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...
- vue案例todolist备忘录
项目效果:https://cinderellastory.github.io/todolist/dist/index.html#/ 项目链接:https://github.com/Cinderella ...
- Vuejs 实现简易 todoList 功能 与 组件
todoList 结合之前 Vuejs 基础与语法 使用 v-model 双向绑定 input 输入内容与数据 data 使用 @click 和 methods 关联事件 使用 v-for 进行数据循 ...
- Vue完成TodoList案例
写一个简单的TodoList的更实用(文末有彩蛋). 一,使用VUE-CLI脚手架快速搭建一个框架 利用VUE-CLI来自动生成我们项目的前端目录及文件,方法: npm install -g vue- ...
- 用vue做todolist
<template> <div class="hello"> <div style="height:25px;line-height:25p ...
- Vuex + localStorage + html实现简易todolist
1.项目结构 2.Vuex,什么是Vuex? 官方文档上的介绍是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种 ...
- 基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts
fx67llQuickEcharts A tool to help you use Echarts quickly! npm 组件说明 这本来是一个测试如何发布Vue组件至npm库的测试项目 做完之后 ...
- vue - Vue脚手架/TodoList案例
今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流程倒是基本上没什么问题了,主要是很多vue ...
随机推荐
- [NOI2007]货币兑换Cash
Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 6353 Solved: 2563[Submit][Status][Discuss] Descriptio ...
- indexOf和contains查找的字符串是空字符，返回值是什么呢？
一直以为indexOf方法查找的字符串如果不匹配返回值就是-1.今天发现空字符返回值是0.看源码原来如此,阴沟里翻船啊!
- Spring+ ApplicationListener
有时候 需要在容器初始化完成后,加载些 代码字典或不常变的信息 放入缓存之类的,这里使用spring 初始化bean,并实例化 1.创建一个ApplicationListener类 import o ...
- 【函数应用】PHP中关于URL的函数处理
一,函数介绍 1.解析HTTP头信息:get_header() array get_headers ( string 目标URL [, int $format = 0 [如果将可选的 format 参 ...
- 【CodeBase】通过层级键在多维数组中获取目标值
通过层级键在多维数组中获取目标值 /* *Author : @YunGaZeon *Date : 2017.08.09 *param data : Data Array *param keys : K ...
- 【PHP】Thinkphp 七牛云API对接
访问一个网站,图片的流量占的比例是非常高的!在你的服务器硬盘上,图片占的容量也是非常高的. 如果要搞一个图片非常多,用户量又很庞大的网站,那么,得花多少钱烧在服务器上? 这种时候,当然要用第三方图片存 ...
- PHP array_multisort()函数超详细理解
项目中用到这个函数了 ,起初对这个函数一直是懵逼状态,文档都看的朦朦胧胧的 网上无意间看到这篇文章 ,写的超级详细,收藏了 . 当然要先放原地址:https://www.cnblogs.com/WuN ...
- JZOJ 2137. 【GDKOI2004】城市统计 (Standard IO)
2137. [GDKOI2004]城市统计 (Standard IO) Time Limits: 1000 ms Memory Limits: 128000 KB Detailed Limits ...
- Bank Simulation Program银行管理系统C++ :)
设计并实现简单的银行存取款系统,系统主界面包括登录和注册两个选项,选择登录,提示用户输入银行帐号和密码,验证通过后进入主界面,主界面包括:存款.取款.查询余额.历史记录.修改密码等功能.注册功能让用户 ...
- Python 枚举类源码解析
1. EnumMeta 元类编程,生成类的类,可以动态生成类. 用法: type(name, bases, dict) name -> 类名: str bases -> 基类: tuple ...