功能：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. JDK目录详解

    bin目录: 该目录用于存放一些可执行程序. 如javac.exe(java编译器).java.exe(java运行工具),jar.exe(打包工具)和* javadoc.exe(文档生成工具)等. ...

  2. Django和Flask这两个框架对比

    Flask 在 Django 之后发布,现阶段有大量的插件和扩展满足不同需要 Django发布于2005年,Flask创始于2010年年中. Django功能大而全,Flask只包含基本的配置,  D ...

  3. jmeter 分布式配置（含参数化问题）

    这次用的是 jmeter 5.1.1  jdk8 调度机: 修改bin目录下jmeter.properties文件 第258行 remote_hosts=192.168.87.34:1856,192. ...

  4. java对list进行排序

    主要讲述对list进行排序的几种方式 1.先来个简单的,上代码 import java.util.ArrayList; import java.util.Collections; import jav ...

  5. Window和Linux文件共享

    一.先设置window上的目录共享 1.1.右击文件要共享的文件夹,选择属性 1.2.设置要共享给的用户和设置用户操作权限 二.安装CIFS共享服务 sudo yum -y install cifs- ...

  6. Day5作业,商城+ATM机+后台管理

    晚来了....东西太多,需要写的blog内容太多,re讲的渣渣,不明白为什么oldboy经常换老师,吐槽下吧,真心不爱了.... github地址在这:https://github.com/ccorz ...

  7. PAT 甲级 1042 Shuffling Machine (20 分)（简单题）

    1042 Shuffling Machine (20 分)   Shuffling is a procedure used to randomize a deck of playing cards. ...

  8. ubuntu 18.04下greenplum安装笔记（二）安装Greenplum的失败的尝试

    之前对Linux环境进行了搭建,现在开始进行Greenplum的正式安装. 下载 进Greenplum的官网:https://greenplum.org/download/ 可以发现,对于ubuntu ...

  9. nfs搭建；nfs监控；mount对于nfs的相应配置

    nfs搭建 https://www.cnblogs.com/lms0755/p/9211585.html https://www.jianshu.com/p/e47cccbb3ae5 https:// ...

  10. golang 切片扩容, 时间复杂度

    在切片扩容时,如果原来的底层数组足够大,能放的下 append 的数据,就不会新建底层数组.而如果不够的话,则会分配一个新的数组.也因此是 O(n) 的时间复杂度