功能：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. springboot之多模块化项目打包

    1.目录结构 2.打成war包,只需在web子项目中的pom文件中添加 <packaging>war</packaging> <build> <!-- 为ja ...

  2. [warn] the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /usr/local/nginx/conf/nginx.conf:1

    带有sudo 权限执行就可以了

  3. React 表单常用整理

    4.填写表单时添加提示小图标,友好展示填写规则 ——Tooltip <FormItem {...formItemLayout} label={( <span> Nickname  & ...

  4. iOS面试经历（个人）

    1.OC的runtime运行机制1> runtime,运行时机制,它是一套C语言库2> 实际上我们编写的所有OC代码,最终都是转成了runtime库的东西,比如类转成了runtime库里面 ...

  5. iOS-ASI异步下载图片

    异步下载图片 异步下载图片ASIHTTPRequest *requestX = [ASIHTTPRequest requestWithURL:url];                 self.re ...

  6. iOS-self.用法

    关于self.用法的一些总结 2010-01-10 21:46 最近有人问我关于什么时候用self.赋值的问题, 我总结了一下, 发出来给大家参考. 有什么问题请大家斧正. 关于什么时间用self. ...

  7. LVS负载均衡在Ubuntu环境下部署详解

    一.本地环境介绍: 负载均衡的三台机器均为Ubuntu Server 14.04 64位系统,内核中已集成ipvs模块( modprobe -l | grep ipvs 查看 ).为演示LVS负载均衡 ...

  8. Andrew Ng机器学习课程14(补)

    Andrew Ng机器学习课程14(补) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 利用EM对factor analysis进行的推导还是要参看我的上一 ...

  9. 不使用局部变量和for循环或其它循环打印出如m=19,n=2結果为2 4 8 16 16 8 4 2形式的串

    需求:不使用局部变量和for循环或其它循环打印形如:2 4 8 16 16 8 4 2 这样的串 代码MainTest.java package com.szp.study.javase.specia ...

  10. C#基础知识学习 三