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文件夹,放 ...
随机推荐
- [Java复习] 多线程 并发 JUC 补充
线程安全问题? 当多个线程共享同一个全局变量,做写的操作时,可能会受到其他线程的干扰.读不会发生线程安全问题. -- Java内存模型. 非静态同步方法使用什么锁? this锁 静态同步方法使用什么 ...
- 123457123456#0#-----com.twoapp.mathGame13--前拼后广--13种数学方法jiemei
com.twoapp.mathGame13--前拼后广--13种数学方法jiemei
- 树形DP入门学习
这里是学习韦神的6道入门树形dp进行入门,本来应放在day12&&13里,但感觉这个应该单独放出来好点. 这里大部分题目都是参考的韦神的思想. A - Anniversary part ...
- 【Leetcode_easy】1108. Defanging an IP Address
problem 1108. Defanging an IP Address solution: class Solution { public: string defangIPaddr(string ...
- Ehcache开启JMX支持
Ehcache提供了基于JMX的监控支持,支持对以下几类信息的监控. CacheManager Cache CacheConfiguration CacheStatistics 按照JMX的规范,为了 ...
- Xena L23网络测试仪Valkyrie使用技巧100例：使用Xena官方在线演示设备 (编号00)
需求# 1.新用户:没有硬件,想看看软件长什么样,好不好用,风格如何,怎么办? 2.代理商:没有硬件,想给客户Show一下Xena高大上的软件,怎么办? 3.老用户:邮件推送了新的软件版本,据说很多新 ...
- 最新 东方财富java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方财富等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方财富.6.7月主要是做系统复习.项目复盘.Leet ...
- Bandicam录制三大神器之一
链接: http://pan.baidu.com/s/1bnDIUOv 密码: etge
- 日常工作问题解决：rhel7下配置多路径设备
目录 1.情景描述 2.安装多路径软件 2.1 安装多路径 2.2检查安装情况 2.3 重启系统 2.4 将多路径软件添加至内核模块 2.5 检查内核添加情况 2.6 启动multipath服务 2. ...
- 1、1通过maven建立spring boot项目（不用联网）
1.把以前spring boot项目的pom.xml导入进来 2.修改pom.xml 里面项目名改成自己项目名 3.复制配置文件 spring: datasource: url: jdbc:mysq ...