<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Template • TodoMVC</title><link rel="stylesheet" href="node_modules/todomvc-common/base.css"><link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"><!--CSS overrides - remove if you don't need it --><link rel="stylesheet" href="css/app.css"></head><body><section class="todoapp"><header class="header"><h1>todos</h1><input class="new-todo" v-model="inputVal" @keyup.enter="addTodo" placeholder="What needs to be done?" autofocus></header><!-- This section should be hidden by default and shown when there are todos --><section class="main"><input id="toggle-all"class="toggle-all" type="checkbox" @change="selectAll" v-model="isAll"><label for="toggle-all">Mark all as complete</label><ul class="todo-list"><!-- Twhese are here just to show the structure of the list items --><!-- List items should get the class`editing` when editing and `completed` when marked as completed --><!--<li class="completed"><div class="view"><input class="toggle" type="checkbox" checked><label>Taste JavaScript</label><button class="destroy"></button></div><input class="edit" value="Create a TodoMVC template"></li>--><li @dblclick="changeStatus(index)" v-for="(item,index) in currentTodoList":class="{completed:item.isCompeleted,editing:currentIndex===index}"><div class="view"><input class="toggle" type="checkbox" v-model="item.isCompeleted" @change="changeOneStatus"><label>{{item.content}}</label><button class="destroy" @click="deleteTodo(index)"></button></div><input @blur="currentIndex=''" v-focus class="edit" value="Rule the web" v-model="item.content"></li></ul></section><!-- This footer should hidden by default and shown when there are todos --><footer class="footer"><!-- This should be `0 items left` by default--><span class="todo-count"><strong>{{leftCount}}</strong> item left</span><!-- Remove thisif you don't implement routing --><ul class="filters"><li><a :class="{selected:hash=='#/'}" href="#/">All</a></li><li><a :class="{selected:hash=='#/active'}" href="#/active">Active</a></li><li><a :class="{selected:hash=='#/completed'}" href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><button class="clear-completed" @click="clearCompleted">Clear completed</button></footer></section><footer class="info"><p>Double-click to edit a todo</p><!-- Remove the below line ↓ --><p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p><!-- Change this out with your name and url ↓ --><p>Created by <a href="http://todomvc.com">you</a></p><p>Part of<a href="http://todomvc.com">TodoMVC</a></p></footer><!-- Scripts here. Don't remove ↓ --><script src="node_modules/vue/dist/vue.min.js"></script><script src="js/app.js"></script></body></html>