功能：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：系统自定义鼠标样式切换

    一.APP通过View修改鼠标样式 app view上修改鼠标样式比较简单,通过 hover event 获取鼠标坐标并使用如下方法修改为自定义图片: getWindow().getDecorView ...

  2. angular绑定数据

    Angular 中使用{{}}绑定业务逻辑里面定义的数据 <h1> Welcome to {{ title }}! /*引入title*/ </h1> export class ...

  3. 贝济埃曲线quadTo与传统的手势轨迹平滑度对比分析

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  4. 持续集成和部署工具GOCD

    如果大家使用过Jenkins那么相信大家对于持续集成非常熟悉.今天要给大家介绍的是另一个非常强大的CD工具GoCD官方对其也称之为GO但是要明白他和go语言golang是没有多大关系的,他是使用jav ...

  5. 使用libxml2创建和解析xml文件

    毕业设计需要用到xml文件来组织和存放数据, 对于Linux环境下,有libxml2可供使用. 经过一段时间查询文档和网站, 基本掌握创建xml文档和解析xml的操作, 简单做一下记录. 创建xml ...

  6. SpringCloud成长之路 一 注册与发现（Eureka）

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  7. ABAP字符串操作1 检查字段小数位的长度

    目的: 标准值1-6检查----最多保留小数点后3位 ,如果超出3位,显示错误信息”请检查父件XXX工序XXX的标准值X 的数值XXXX超出3位 “,退出. 关键语法1. SPLIT ,        ...

  8. Laravel 别名Redis 与 Redis 扩展冲突

    use Redis; //通过别名引用会报错 今天尝试使用了 Laravel 的 redis 结果报了如下错误. Non-static method Redis::xxx() cannot be ca ...

  9. DB2中的NVL和NVL2函数

    NVL函数是一个空值转换函数 NVL(表达式1,表达式2) 如果表达式1为空值,NVL返回值为表达式2的值,否则返回表达式1的值. 该函数的目的是把一个空值(null)转换成一个实际的值.其表达式的值 ...

  10. python微信服务号关注授权、消息推送流程

    阅读目录 推送的方式: 微信推送的流程: 流程分析: 给用户推送消息功能 推送的方式: 短信推送(第三方) 邮件推送 微信推送 公众号:认证的公众号(个人的认证公众号每天只能发一篇文章),粉丝可以跟公 ...