功能：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)">&timesbar;</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页面的更多相关文章

  1. vue 获取页面详情后 切换页面时 如何监听用户是否修改过信息

    可以用 beforeRouteLeave 和 updated 来判断.export default { name: 'supplier', components:{cmtWrap,cmtContent ...

  2. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  3. viewpage 循环滑动播放图片

    一般来说,viewpage 只支持图片的顺序滑动播放,在滑到边界时就再也滑不动了,如果要想继续滑动,只能向两边额外增加一张相片,即把第一张相片的位置放在最后一张图片的后面,给用户的感觉我继续滑就滑到了 ...

  4. Angular 2 从0到1 （三）

    作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:A ...

  5. Angular待办事项应用2

    todo组件 接上一篇,在根目录创建todo组件 命令行输入:ng g c todo 得到 文件结构 修改默认路由为todo: 然后打开浏览器:http://localhost:4200/ ,查看,t ...

  6. redux、immutablejs和mobx性能对比（一）

    一.前言 关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这里 ...

  7. redux、immutablejs和mobx性能对比（二）

    三.分析数据 1.前提说明 我对测试出的10个数据摘除最大值与最小值,然后求平均值 根据平均值我绘制了一个曲线图一个柱状图 曲线图用于查看1000-100000的性能趋势 柱状图用于比较在相同条数下r ...

  8. Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入

    目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...

  9. express+mongoDB（mLab）做一个todolist小项目

    这是在网课上学习的,先建立一个express-todolist文件夹作为项目跟目录 另外,我们直接把项目上用到的css文件和js文件下载下来放在项目里 这里直接贴出来 先建立一个public文件夹,放 ...

随机推荐

  1. Android仿微信底部选项卡

    第一步 添加依赖 dependencies { compile 'com.yinglan.alphatabs:library:1.0.5' } 第二步 布局使用 <?xml version=&q ...

  2. pytorch中的学习率调整函数

    参考:https://pytorch.org/docs/master/optim.html#how-to-adjust-learning-rate torch.optim.lr_scheduler提供 ...

  3. C++11消息队列 + Qt线程池 + QRunnable执行任务简单模型

    1.模板类queue,包含头文件<queue>中,是一个FIFO队列. queue.push():在队列尾巴增加数据 queue.pop():移除队列头部数据 queue.font():获 ...

  4. Zabbix4.x 历史数据存储到Elasticsearch7.x

    一.简介 Zabbix 3.4.6 版本开始支持历史数据存储到 Elasticsearch, 早就想测试这个功能,最近有个需求需保存 zabbix 的历史数据上达十亿条,因此决定测试这功能的实用性,事 ...

  5. videojs改变音量大小

    <audio id=example-video preload="auto" class="video-js vjs-default-skin" type ...

  6. Apache配置日志切割

    随着网站的访问越来越大,WebServer产生的日志文件也会越来越大,如果不对日志进行分割,那么只能一次将大的日志(如Apache的日志)整个删除,这样也丢失了很多对网站比较宝贵的信息,因为这些日志可 ...

  7. html设置多个div并排显示

    我这里以4个div为例,html代码如下: <body> <div id="column1" style="background-color: blue ...

  8. droid AVD创建及设置中各参数详解

    设置AVD时有些参数比较模糊,特地找了篇文章,大家参考下! 本文根据如下的模拟器安装做一些解释: Name: 自定义虚拟的名称,不能有空格或者其他非法字符,否则不能创建,即Creat AVD不能高亮点 ...

  9. Efcore迁移

    Efcore迁移 Add-Migration XX:1.根据模型的实际结构对比当前快照,从而生成新迁移文件的Up和Down方法2.根据模型的实际结构修改快照和新迁移文件---------------- ...

  10. Python进入后台界面（admin）设定

    前言 用过Django框架的童鞋肯定都知道,在创建完Django项目后,每个app下,都会有一个urls.py文件,里边会有如下几行: ※特别要注意下面标红颜色的部分[] 一般情况下不需要修改什么东西 ...