TODO page

　　Function: 1. According to the data currently pending events,

　　　　　2. input box can be carried out by adding events to mark the event has been completed and delete, modify events have been added.

　　ps: the introduction of plug-ins are using a local file, you need to switch to a static CDN.

　　effect:

　　Code:

<!--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}}
                  </ <->Dynamic binding style<-!>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 new Vue ({ 
    EL: "#app" , 
    Data: { 
        Todos: [{ 
                isSelected: to false , 
                title: "sleep" 
            }, 
            { 
                isSelected: to false , 
                title: "eat" 
            }, 
        ] , 
        title: "" , 
        CUR: "" 
    }, 
    directives: { 
        // custom commands, parameters el operating element, binding.value bound value, then the command element is added automatically acquire focus 
        focus (el, binding) {
             IF(binding.value) 
            el.focus (); 
        } 
    }, 
    Methods: { 
        Leave () { 
            // loses focus, display the added event 
            the this the .cur = "" ; 
        }, 
        // Double-click on the recording element 
        remenber (TODO) {
             the this the .cur = TODO; 
        }, 
        the Add () { // add event, when pressing the Enter added 
                the this .todos.push ({ 
                    isSelected: to false , 
                    title: the this .title 
                }); 

            the this . = title ""; // value input box empty
        }
         // return the set of elements in addition to remove 
        Remove (TODO) {
             the this .todos = the this .todos.filter (Item => Item ==! ; TODO) 
        } 
    }, 
    computed: { 
        // count the number of events, can be computed cache, it is not used to implement the method 
        COUNT () { // remember to get reutn 
            return  the this .todos.filter (Item =>! item.isSelected) .length; 
        } 
    } 
});

Guess you like