vue.jsでのメモ機能の実装について詳しく解説-jsチュートリアル-php.cn

vue.jsでのメモ機能の実装について詳しく解説

巴扎黑

リリース： 2017-07-23 15:26:26

オリジナル

2091 人が閲覧しました

この vue のメモ機能の実装のデモは、K さんが github で見つけたもので、vue.js を始めるための非常に簡単なデモだと思ったので、ここで共有しました。

(他の人の仕事の結果を尊重し、小さなことから始めましょう~ デモの元の github アドレス:)

1. 実装効果

2. コードディスプレイ

rreee

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>备忘录</title><link rel="stylesheet" type="text/css" href="css/index.css?1.1.11" /><style>[v-cloak] { display: none; }</style></head><body><section class="todoapp">  <header class="header"><h1>todos</h1><input class="new-todo"  autofocus autocomplete="off"  placeholder="What needs to be done?"  v-model="newTodo"  @keyup.enter="addTodo">  </header>  <section class="main" v-show="todos.length" v-cloak><input class="toggle-all" type="checkbox" v-model="allDone"><ul class="todo-list">  <li v-for="todo in filteredTodos"class="todo":key="todo.id":class="{ completed: todo.completed, editing: todo == editedTodo }"><div class="view">  <input class="toggle" type="checkbox" v-model="todo.completed">  <label @dblclick="editTodo(todo)">{{ todo.title }}</label>  <button class="destroy" @click="removeTodo(todo)"></button></div><input class="edit" type="text"  v-model="todo.title"  v-todo-focus="todo == editedTodo"  @blur="doneEdit(todo)"  @keyup.enter="doneEdit(todo)"  @keyup.esc="cancelEdit(todo)">  </li></ul>  </section>  <footer class="footer" v-show="todos.length" v-cloak><span class="todo-count">  <strong>{{ todos.length }}</strong> {{ remaining | pluralize }} left</span><ul class="filters">  <li><a href="#/all" :class="{ selected: visibility == &#39;all&#39; }">All</a></li>  <li><a href="#/active" :class="{ selected: visibility == &#39;active&#39; }">Active</a></li>  <li><a href="#/completed" :class="{ selected: visibility == &#39;completed&#39; }">Completed</a></li></ul><button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">  Clear completed</button>  </footer></section><footer class="info"><p>双击编辑一条备忘录</p></footer></body><script language="JavaScript" src="js/director.js?1.1.11"></script><script language="JavaScript" src="js/vue.js?1.1.11"></script><script language="JavaScript" src="js/index_vue.js?1.1.11"></script></html>

ログイン後にコピー

以上がvue.jsでのメモ機能の実装について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。