vue 简易toDoList
2024-08-26 01:29:28
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>
最新文章
- a冲刺总结随笔
- SharePoint 2010升级到sharePoint 2013后，人员失去对网站的权限的原因及解决方法。The reason and solution for permission lost after the upgrading
- Poj-2250-Compromise
- LCA算法倍增算法（洛谷3379模板题）
- Delphi XE5 for android 图片缩放和拖动处理
- C++学习笔记39：进程概念
- Vistual Studio 2010 调试无法进断点
- CloudFormation
- 路由页面缓存开启 以及 keep-alive 给你埋下的坑
- java vector 和ArrayList的区别
- JavaScript算法 ,Python算法,Go算法,java算法,系列之【归并排序】篇
- centos 自带mysql卸载时出现无法卸载情况
- 各种语系的unicode对应以及local编码方式
- 弄懂 JRE、JDK、JVM 之间的区别与联系
- NOIP2013华容道 大爆搜
- 人生苦短,我用Python(1)
- #define用法之一
- NIO的通道和缓冲区
- UBUNTU安装 Rabbitvsc可视化版本控制客户端软件
- 使用HttpClient 传送form 表单的请求