TODO页面
功能：1.根据数据显示当前所未完成的事件，
2.可通过输入框进行事件的添加，可标记已完成的事件并进行删除，可修改已添加的事件。
ps:插件引入均使用本地文件，需改用静态CDN。
效果：
代码实现：
<!--todo.html-->
<!-- <!DOCTYPE html> -->
<html> <head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
<style>
.del{
text-decoration: line-through;
color: #cccccc!important;
}
</style>
</head> <body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
ToDoList
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="text-danger">你有{{count}}件事情未完成</h3>
<input type="text" class="form-control" v-model="title"@keyup.13="add">
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item" v-for="(todo,index) in todos" @dblclick="remenber(todo)"> <div :class="{del:todo.isSelected}" style="display:inline-block;" v-show="cur!==todo">
<input type="checkbox" v-model="todo.isSelected">{{todo.title}}
</div>
<!-- 动态绑定样式 -->
<input type="text" v-model="todo.title" v-show="cur===todo" @blur="leave" v-focus="cur===todo">
<button class="pull-right btn btn-xs btn-danger"@click="remove(todo)">⨱</button>
</li>
</ul>
</div>
<div class="panel-footer">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">全部任务</a></li>
<li role="presentation"><a href="#">已完成</a></li>
<li role="presentation"><a href="#">未完成</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="node_modules\axios\dist\axios.js"></script>
<script src="node_modules\vue\dist\vue.js"></script>
<script src="todo.js"></script>
</html>
//todo.js
const vm = new Vue({
el: "#app",
data: {
todos: [{
isSelected: false,
title: "睡觉"
},
{
isSelected: false,
title: "吃饭"
},
],
title: "",
cur:""
},
directives:{
// 自定义命令，参数el为操作元素，binding.value为绑定的值，添加该命令则元素自动获取焦点
focus(el,binding){
if(binding.value)
el.focus();
}
},
methods: {
leave(){
// 失去焦点时，显示所添加的事件
this.cur="";
},
// 双击时记录点击的元素
remenber(todo){
this.cur = todo;
},
add() { //用于添加事件,当按下回车添加
this.todos.push({
isSelected: false,
title: this.title
}); this.title = ""; //清空输入框的值
},
// 返回除了删除元素之外的集合
remove(todo) {
this.todos = this.todos.filter(item => item !== todo);
}
},
computed: {
// 计算事件个数，computed能够缓存，故不使用方法来实现
count(){//记得get方法要reutn
return this.todos.filter(item=>!item.isSelected).length;
}
}
});
TODO页面的更多相关文章
- vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息
可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- viewpage 循环滑动播放图片
一般来说,viewpage 只支持图片的顺序滑动播放,在滑到边界时就再也滑不动了,如果要想继续滑动,只能向两边额外增加一张相片,即把第一张相片的位置放在最后一张图片的后面,给用户的感觉我继续滑就滑到了 ...
- Angular 2 从0到1 （三）
作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:A ...
- Angular待办事项应用2
todo组件 接上一篇,在根目录创建todo组件 命令行输入:ng g c todo 得到 文件结构 修改默认路由为todo: 然后打开浏览器:http://localhost:4200/ ,查看,t ...
- redux、immutablejs和mobx性能对比（一）
一.前言 关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这里 ...
- redux、immutablejs和mobx性能对比（二）
三.分析数据 1.前提说明 我对测试出的10个数据摘除最大值与最小值,然后求平均值 根据平均值我绘制了一个曲线图一个柱状图 曲线图用于查看1000-100000的性能趋势 柱状图用于比较在相同条数下r ...
- Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入
目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...
- express+mongoDB（mLab）做一个todolist小项目
这是在网课上学习的,先建立一个express-todolist文件夹作为项目跟目录 另外,我们直接把项目上用到的css文件和js文件下载下来放在项目里 这里直接贴出来 先建立一个public文件夹,放 ...
随机推荐
- Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法
<app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button ( ...
- 几种主流浏览器内置http抓包工具软件使用方
对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...
- PAT 甲级 1058 A+B in Hogwarts (20 分) （简单题）
1058 A+B in Hogwarts (20 分) If you are a fan of Harry Potter, you would know the world of magic ha ...
- （十七）Centos之安装配置tomcat8
第一步:下载Tomcat8压缩包 进入 http://tomcat.apache.org/download-80.cgi 下载tar.gz压缩包 第二步:用ftp工具把压缩包上传到/home/data ...
- win7下安装IIS7
在Windows 7下如何安装IIS7,以及IIS7在安装过程中的一些需要注意的设置,以及在IIS7下配置ASP的正确方法. 在Windows 7下面IIS7的安装方法: 一.进入Windows 7的 ...
- 【C# 开发技巧】番外篇故事-我是一个线程
我是一个线程 我是一个线程,一出生就被编了一个号——0x3704,然后被领到一间昏暗的屋子里,在这里,我发现了很多和我一模一样的同伴.我身边的同伴0x6900待的时间比较长,他带着沧桑的口气对我说:“ ...
- Egret入门学习日记 --- 第二十篇（书中 9.1~9.3 节 内容 组件篇）
第二十篇(书中 9.1~9.3 节 内容 组件篇) 第八章中的内容. 以上都是基本的Js知识,我就不录入了. 直接来看 第9章. 开始 9.1节. 以上内容告诉你,Egret官方舍弃了GUI,使用了E ...
- MATLAB知识-解决因缺少libsvm 而运行出现Y must be a vector or a character array.
matlab版本R2014b 最近运行一个使用svmtrain的程序,出现以下错误: 这是因为是在设定路径里面没有libsvm.辛亏有一位师姐的电脑里面有libsvm的包,我直接用了,这样就不需要下载 ...
- Django 数据库
一.操作数据库 Django配置连接数据库: 在操作数据库之前,首先先要连接数据库.这里我们以配置MySQL为例来讲解.Django连接数据库,不需要单独的创建一个连接对象.只需要在settings. ...
- 关于React的脚手架
Rewire你的应用 https://ant.design/docs/react/use-with-create-react-app-cn create-react-app (官方脚手架 简称cra) ...