vue实现实现ToDoList简单实例简单实例
主要为大家详细介绍了vue实现ToDoList简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、需求与准备一、需求与准备
1、准备、准备
使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要
2、功能需求、功能需求
1）、表单实现输入任务清单后加入到展示项中
2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件）
3)、确定删除时，删除对应项（单项删除，全部删除）
4）、任务列表为空时，显示“数据为空” v-show
二、实例二、实例
1、静态页面、静态页面
demo使用bootstrap来快速搭建页面
1）、表单组件：
.form, form-group, form-control
2)、模态框：
样式类：.modal,modal-content,modal-header,modal-body,modal-footer
触发模态框：data-toggle=”modal”,data-target=”模态框ID”
取消模态框：data-dismiss=”true”
2、功能实现
1）、表单数据：
v-model（数据绑定）,v-on:click=”fun()”（绑定事件）,v-for=”value in dataArr”(遍历),
2）、添加任务
思路：通过v-model绑定数据到vue实例中（timeStamp,taskItem用于暂存数据），点击提交时，在事件响应函数内向任务列表数组内添
加提交的数据后，再清空用于存放数据的timeStamp,taskItem。
3）、删除任务
在vue实例中的methods属性上添加事件响应函数，在data中定义targetIndex以存放点击的按钮索引，遍历时，绑定点击事件v-
on:click=”targetIndex=$index”,点击时根据targetIndex的值，删除对应索引的数据。
4）、删除全部
绑定删除全部按钮事件，targetIndex=-2，在删除响应除数内通过判断确定是部分删除还是全部删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="../vendor/jquery-1.7.2.js"></script>
<script src="../vendor/bootstrap.js"></script>
<link href="../vendor/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<script src="../vendor/vue/dist/vue.js"></script>
</head>
<body>
<div class="container" id="box">
<form >
<div class="form-group">
<label for="timeStamp">时间</label>
<input type="datetime" id="timeStamp" v-model="timeR" name="timeStamp" class="form-control">
</div>
<div class="form-group">
<label for="todoItem" class="">任务</label>
<input type="text" id="todoItem" name="todoItem" v-model="taskItem" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-success" v-on:click="add()" type="button">添加</button>
<button class="btn btn-danger" type="submit">重置</button>
</div>
</form>
<table class="table table-bordered text-center">
<caption><h3>任务清单</h3></caption>
<tr >
<th class="text-center">序号</th>
<th class="text-center">时间</th>
<th class="text-center">任务</th>
<th class="text-center">操作</th>
</tr>
<tr v-for="value in taskList">
<td>{{$index+1}}</td>
<td>{{value.timeStamp}}</td>
<td>{{value.task}}</td>
<td><button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=$index">删除</button></td>
weixin_38589795
- 粉丝: 4
- 资源: 914
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0