功能：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. 遍历List集合删除元素的出现报错

    遍历List集合删除元素的出现报错   遍历List集合删除元素的时候会发生索引越界异常或内容遍历不全等问题. 例子: List<String> al = new ArrayList< ...

  2. ORM连表操作

    连表操作分为以下三种情景: 一对多:models.ForeignKey(其他表) 多对多:models.ManyToManyField(其他表) 一对一:models.OneToOneField(其他 ...

  3. fiddler https 抓包

    手机上https抓包: http://blog.csdn.net/wangjun5159/article/details/52202059 需要给fiddler安装插件CertMaker for iO ...

  4. render()中添加js函数

    方案一: { title: '操作', key: 'operation', render: (_, record) => ( <div> <Link to={`/hostMai ...

  5. Core JSON及JSON解析

    JSON (JavaScript Object Notation) 是一种基于文档的标准数据交换格式,它可以让应用程序通过网络交换数据.JSON独立于编程语言(Ruby, Java/EE, JavaS ...

  6. mybatis 找不到映射器xml文件 （idea）

    原因是: idea不会编译src的java目录的xml文件 所以解决思路就是:将IDEA maven项目中src源代码下的xml等资源文件编译进classes文件夹 具体操作方法就是:配置maven的 ...

  7. 网页为什么会乱码？浅析字符集编码ASCII和Unicode

    因为编码不对! 什么是编码?编码不对为什么会乱码? ……?? 编码转换为什么会丢失数据? ……?? 不管是数据库还是网页,都可能碰到过乱码问题 在计算机世界里,所有数据都使用二进制存储,即只有1和0, ...

  8. jquery换一批的写法

    jquery换一批的写法 <pre> <img src="{$yuming}/images/3/huanyipi.png" alt="" cu ...

  9. 洛谷 题解 UVA10048 【噪音恐惧症 Audiophobia】

    [题意] 输入一个\(C\)个点\(S\)条边 \((C<=100)\) \((S<=1000)\)的无向带权图,边权表示该路径上的噪声值.当噪声太大时,耳膜可能会收到损伤,所以当你从某点 ...

  10. JDBC 注册驱动，获取连接

    jdbc 动力节点视频教程 JDBC编程六步 1.注册驱动(作用:告诉Java程序,即将要连接的是哪个品牌的数据库) 2.获取连接 (表示JVM进程和数据库进程之间的通道打开了,属于进程间的通信,重量 ...