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文件夹,放 ...
随机推荐
- nginx限制流量
location /download/ { limit_rate_after 5m; limit_rate 1m; alias /data/html/; }
- C语言练习，可以解析协议，主机，路径，询问，片段等
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...
- 不同操作系统上DNS客户端操作区别汇总
结论:windows有DNS缓存,Linux默认无DNS缓存,只能依赖于安装其他软件. 一.不同操作系统的客户端的DNS缓存差别 1.windows 系统中dns 解析器会使用系统的dns缓存来提高d ...
- Qt编写自定义控件59-直方动态图
一.前言 直方动态图类似于音乐播放时候的柱状图展示,顶部提供一个横线条,当柱状上升的时候,该线条类似于帽子的形式冲到顶端,相当于柱状顶上去的感觉,给人一种动态的感觉,听音乐的同时更加赏心悦目,原理比较 ...
- OpenStack Heat模板详解
Heat模板全称为heat orchestration template,简称为HOT. 1 典型Heat模板结构 heat_template_version: 2015-04-30 descript ...
- ELK之elasticsearch7版本集群设置
ELK7版本搭建参考:https://www.cnblogs.com/minseo/p/10948632.html node-1已经安装配置好 配置文件如下 [root@salt-test conf. ...
- iOS-textfield控制光标开始位置
// UIView *paddingView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.wi ...
- dos下通过命令访问url网址
psexec.exe工具: https://blog.csdn.net/feier7501/article/details/8841756 https://www.cnblogs.com/boltki ...
- Vector3.Angle问题
Angle角度 public static float Angle(Vector3 from, Vector3 to); 返回的角度总是两个向量之间的较小的角(实测返回不大于 180 度, 并不是 u ...
- 分布式消息通信之RabbitMQ_Note
目录 1. RabbitMQ 安装 2. RabbitMQ 应用场景,特性 3. 官网入门指引 4. RabbitMQ 工作模型 5. RabbitMQ 主要的几种交换机类型 6. Java API的 ...